javascript DOM之节点那些事

作者: writeanewworld | 来源:发表于2018-01-10 21:31 被阅读0次

javascript DOM之节点那些事
DOM (javascript DOM节点操作)
reactive
前端面试题总结（算法）
javascript之DOM节点
JavaScript基础与DOM
jQuery-DOM篇
【前端】-029-DOM编程-节点操作
JavaScript DOM常用操作
一篇文章教会你如何将DOM转换为virtual DOM

1.创建和增加节点

image.png

创建追加节点

可以使用最简单的方法：这样就会追加一个div节点

document.body.innerHTML += '<div></div>';

但是这样对于浏览器来说是很痛苦的,所以这样：

var div02 = document.createElement('idv'); //创建元素
document.body.appendChild(div02);//追加节点

但是这样：你咋子做嘛？

<div id="div001" class="div001">
   <p class="p001" id="p001">
       世界你好,模板
   </p>
</div>

答案:手动添加节点：这种做法浏览器是最轻松的但是你也是最痛苦的。

  <script type="text/javascript">
   window.onload=function(){
   //   1.创建元素节点
       var div01 = document.createElement('div');
   //  2.  为元素节点创建属性节点
       div01.setAttribute('id','div001');
       div01.setAttribute('class','div001');
   //   3.创建第二个元素节点
       var p01 = document.createElement('p');
   //    4.为第二个元素节点创建属性节点
       p01.setAttribute('class','p001');
       p01.setAttribute('id','p001');
   //  5.  创建文本节点
       var ptxt = document.createTextNode('世界你好,模板');
   //    6.添加文本节点
       p01.appendChild(ptxt);
   //    7.添加元素节点
       document.body.appendChild(div01);
       // document.body.appendChild(p01);
       div01.insertBefore(p01,div01.firstChild);
   }
</script>

3.克隆节点

。true表示深度复制，就是复制全部。
。documentfragment克隆缓存机制,提升克隆效率。

 <script type="text/javascript">
    window.onload=function(){
        var div02 = document.createElement('div');
        div02.setAttribute('id','div02');
        div02.setAttribute('class','divcss');
        var txt = document.createTextNode('div02 content');
        //属性节点不用添加
        //添加文本节点
        div02.appendChild(txt);
        //添加元素节点
        document.body.appendChild(div02);

        //缓存克隆
        var df = document.createDocumentFragment();
        for(var i=0;i<10;i++){
            var div = div02.cloneNode(true);
            div.setAttribute('id','div'+(i+3))  ;
            df.appendChild(div);
        }
        document.body.appendChild(df);
    }
</script>

<body>

</body>