Dom-增加、删除

标签：ref   保存   innerhtml   改进   挂载   append   虚拟   浏览器   pen   

一、增加

     添加一个元素分为3个步骤：

           1.创建一个空元素对象

              var a=document.createElement("a")

            2.设置关键属性

              a.href="www.baidu.com";

               a.innerHTML="go to baidu";

            3.将新对象挂载到Dom树上指定位置（3种情况）

                 1）在当前父元素下的结尾，添加一个新元素：

                        父元素.appendChild(a)

                  2）在父元素下的某个子元素之前插入：

                         父元素.insertBefore（a,child）

                  3）替换父元素的某个子元素

                          父元素.replaceChild（a，child）

以上操作的缺点：由于每次修改一次dom树，浏览器都会重绘页面，比较耗资源

改进方法如下：1.如果同时添加父元素和子元素时，应该先在内存中将子元素添加到父元素中，然后将父元素一次性添加到dom树上。

                         2.如果父元素已经在页面上了，同时要添加多个平级子元素的时候，先将多个子元素临时加入文档片段对象中，再一次性将文档片段对象一次性添加到dom树上。

                         文档片段对象将子元素添加到dom树后，将自动释放。

                          文档片段是内存中临时保存多个平级子元素的虚拟父元素

操作方法：

                 1.先创建一个文档片段对象：

                  var frag=document.createDocumentFragment();

                 2.将子元素添加到frag中

                   frag.appendChild(child);

                 3.将frag整体添加到dom树上

                  父元素.appendChild(frag);

二、删除

Dom-增加、删除

标签：ref   保存   innerhtml   改进   挂载   append   虚拟   浏览器   pen   

原文地址：https://www.cnblogs.com/houcong/p/11478606.html