关于DOM元素、属性总结笔记

获取
1.第一部分：标签和属性获取
2.第二部分：属性获取
自定义属性H5：data-

 console.log(div.getAttribute('index'));//自定义属性。获取
       div.setAttribute('index',2);//设置
       div.className='test';
       div.removeAttribute('index');//移除

 console.log(div.getAttribute('data-time'));
        console.log(div.dataset.time);
        console.log(div.dataset.nameData);//ie11才兼容

3.第三部分：父子兄节点

父子	备注
parentNode 、childNodes	含有文本：注释、换行、文本
firstChild 、lastChild	同上
children、children[0]、children[el.children.length-1]	不含文本：注释、换行、文本
firstElementChild、lastElementChild	同上、但有兼容性ie9以上

var erweima=document.querySelector('.erweima');
    var box=document.querySelector('.box');
    console.log(erweima.parentNode);
    console.log(box.childNodes);
    var ul=document.querySelector('ul');
    console.log(ul.childNodes);
    console.log(ul.children);
    console.log(ul.firstChild);
    console.log(ul.lastChild);
    console.log(ul.firstElementChild);//兼容性问题ie9
    console.log(ul.lastElementChild);
    console.log(ul.children[0]);
    console.log(ul.children[ul.children.length-1]);

4.第四部分:兄节点

兄	备注
nextSibling、previousSibling	含有文本：注释、文本、换行
nextElementSibling、previousElementSibling	不含有文本：注释、文本、换行。兼容问题ie9以上
兼容解决办法：封装函数

   console.log(div.nextSibling);
        console.log(div.previousSibling);
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);

5.第五部分：属性
创建、添加、删除

  var li=document.createElement('li');//创建
        var ul=document.querySelector('ul');
        ul.appendChild(li);//添加在ul之后
        var lili=document.createElement('li');
          //添加在ul里面，插入在第一个li之前
        ul.insertBefore(lili,ul.children[0]);
        ul.removeChild(ul.children[0]);//删除ul的第一个标签

6.第六部分：节点
复制节点
el.cloneNode()

      var ul=document.querySelector('ul');
        //1.深拷贝。复制节点，复制内容
        //2.浅拷贝。复制节点，不复制内容（默认括号为空，false.)
        ul.appendChild(ul.children[0].cloneNode(true));//深拷贝