• 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

JS学习笔记之DOM操作

Code Log 神棍 628℃ 0评论

共同学习js,不对的地方欢迎大家指正。

js Dom 操作
       
一.document获取节点的基本方法
    1.document.getElementById(‘id’);                                  //通过id来获取元素,返回指定的唯一元素。
    2.document.getElementsByName(“name”);                      //通过name来获取元素,返回name=’name’的集合。
    3.document.getElementsByClassName(“classname”)         //用classname来获取元素,返回的是一个class=”classname”的集合(不兼容IE8及以下)。
    4.document.getElementsByTagName(‘div’);                     //用元素的标签获取元素,返回所有标签=“div”的集合。

getElementsByClassName不兼容ie8及以下,所以需要做兼容,搜集到以下两种方式:


//兼容IE getElementsByClassName取标签 方法一
//写成一个函数,每次调用这个函数
function getElementsByClassName(className,root,tagName) {    //root:父节点,tagName:该节点的标签名。 这两个参数均可有可无
    if(root){
        root=typeof root=="string" ? document.getElementById(root) : root;   
    }else{
        root=document.body;
    }
    tagName=tagName||"*";                                    
    if (document.getElementsByClassName) {                    //如果浏览器支持getElementsByClassName,就直接的用
        return root.getElementsByClassName(className);
    }else { 
        var tag= root.getElementsByTagName(tagName);    //获取指定元素
        var tagAll = [];                                    //用于存储符合条件的元素
        for (var i = 0; i < tag.length; i++) {                //遍历获得的元素
            for(var j=0,n=tag[i].className.split(' ');j

二.js  节点操作方法
       
        1.获取节点
        document.documentElement        //获取整个Html Dom结构
        element.childNodes                     //得到element的全部子节点
        element.parentNode                    //得到element的父节点
        element.nextSibling                    //得到element的下一个兄弟节点
        element.previousSibling              //得到element的上一个兄弟节点
        element.firstChild                       //得到element的第一个节点
        element.lastChild                        //得到element的最后一个节点
        *        example : console.log(element.nextSibling.previousSibling);
       
        2.节点 获取/设置 属性
        *element.setAttribute("class","class1")         //设置元素属性
        *element.getAttribute("class")                    //获取元素属性
        *element.removeAttribute("class")              //删除元素属性
        *      example : element.parentNode.setAttribute("id","bannerUl");

        3.创建节点
        createElement()                                          //创建标签名为tagname的元素
        createTextNode()                                        //创建包含文本text的文本节点
        createDocumentFragment()                         //创建文档碎片节点               
        *         example: document.createElement("p");       
        *       example: document.createTextNode("Hellow world");
        *         document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
       
        4.添加、移除、替换、复制节点。
        element.appendChild()                                           //向节点的子节点列表末尾增加一个新的节点
        element.insertBefore(newchild,refchild)                    //向某个子节点的前面插入一个节点    newchild新的节点  refchild指定的节点
        element.removeChild()                                           //删除某个节点 只能删除下一级的节点
        element.replaceChild(newnode,oldnode)                   //替换DOM节点的方法     newnode新的节点      oldnode需要替换的节点
        element.cloneNode(Boolean)                                   //设置为 true,克隆节点及其属性,以及后代, 设置为 false,则只克隆节点及其属性,不克隆后代节点
        element.cloneNode                                                   //不同于一般的赋值 var li  = childodeClear(ul2).childNodes[0].cloneNode(true) != var li  = childodeClear(ul2).childNodes[0]; 后者是赋值一个内存地址,所以操作会改变原来的节点

常见问题:
        用element.childNodes获取一个节点的子元素集合的时候(ul获取li集合),如果里面有很多空格/回车,子集的长度会不符合子集个数。需要手动清除回车、空格

转载请注明:Falost的小窝 » JS学习笔记之DOM操作

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (6)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址