4、节点创建删除、元素属性设置获取、节点属性

节点的创建删除

创建元素：document.createElement()
var div=document.createElement('div')
div.innerHTML=123;
将div放在body里
document.body.appendChild(div);
创建文本节点：document.createTextNode('文本内容');
创建注释节点：document.createComment('注释内容');
增加子节点：appendChild  在Node.prototype

在a标签剪切到div标签下面

c.insertBefore(a,b) //插入：在父级c节点下的子节点b之前插入a节点
父节点.removeChild(子节点) //将节点从Dom节点上移除
p.remove() 彻底销毁p元素
innerHTML、innerText 
div.innerHTML+='23456';
innerHTML可以添加标签元素，且标签元素会自动翻译
父级.replaceChild(new,origin)
<div>
  <h1></h1>
 </div>
var div=document.getElementsByTagName('div')[0];
var h1=document.getElementsByTagName('h1')[0];
var h2=document.createElement('h2');
div.replaceChild(h2,h1); //此时div里就是h2标签了
setAttribute() 给元素添加属性 getAttribute()
div.setAttribute('id','box');
var attr=div.getAttribute('id');
系统自定义属性 HTML5给元素添加了一个data-*属性,用data-*设置的属性也可以通过getAttribute获取
属性值 data-*的兼容性不是很好，手机端没问题，pc端ie9及一下都不兼容
<p data-age='18'>lll</p>
var p=document.getElementsByTagName('p')[0];
var attr=p.getAttribute('data-age')

p.dataset.age=’18’

创建文档碎片 document.createDocumentFragment()

 var oUl=document.getElementById('list');
    // var oDiv=document.createElement('div');
    var oFrag=document.createDocumentFragment();
    for(var i=0;i<10000;i++) {
        var oLi=document.createElement('li');
        oLi.innerHTML=`${i}、这是第${i}个项目`;
        oLi.className='list-item';
       // oUl.appendChild(oLi);//性能比较差
       //oDiv.appendChild(oLi); //此处引来了一个新的节点标签
       oFrag.appendChild(oLi)
    }
    oUl.appendChild(oFrag);

用insertBefore封装insertAfter

<div>
  <p></p>
    <h1></h1>
</div>
var div=document.getElementsByTagName('div')[0];
var h1=div.getElementsByTagName('h1')[0];
var oStrong=document.createElement('strong');
div.insertBefore(oStrong,h1)

  var div=document.getElementsByTagName('div')[0];
  var h1=div.getElementsByTagName('h1')[0];
  var oStrong=document.createElement('strong');
   Element.prototype.insertAfter=function(target,afterNode){
        var nextElem=afterNode.nextElementSibling;
        if(nextElem){
            this.insertBefore(target,nextElem);
        }else{
            this.appendChild(target);
        }
    }
   div.insertAfter(oStrong,h1)