DOM节点创建和修改有哪些常用API

答案：

创建节点

• createElement

• createTextNode

• createDocumentFragment(临时节点)

修改节点

• appendChild parent.appendChild(child)

• insertBefore parentNode.insertBefore(newNode,refNode);

• removeChild parent.removeChild(node)

• replaceChild

 

详细解析：

一、创建节点

createElement

createElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签。

var div = document.createElement("div");

注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中。

createTextNode

createTextNode用来创建一个文本节点。

var textNode = document.createTextNode("一个TextNode");

createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要appendChild将其添加到HTML文档树中。

createDocumentFragment（临时节点）

createDocumentFragment方法用来创建一个DocumentFragment，表示一种轻量级的文档，它的作用主要是存储临时的节点用来准备添加到文档中。createDocumentFragment方法主要是用于添加大量节点到文档中时会使用到。

假设要循环一组数据，然后创建多个节点添加到文档中，代码如下：

 1 <ul id="list"></ul>
 2 <input type="button" value="添加多项" id="btnAdd" />
 3 
 4 document.getElementById("btnAdd").onclick = function(){
 5     var list = document.getElementById("list");
 6     for(var i = 0;i < 100; i++){
 7         var li = document.createElement("li");
 8         li.textContent = i;
 9         list.appendChild(li);
10     }
11 }

这段代码将按钮绑定了一个事件，这个事件创建了100个li节点，然后依次将其添加HTML文档中。这样做有一个缺点：每次一创建一个新的元素，然后添加到文档树中，这个过程会造成浏览器的回流。所谓回流简单说，就是指元素大小和位置会被重新计算，如果添加的元素太多，会造成性能问题。这个时候，就是使用createDocumentFragment了。

DocumentFragment不是文档树的一部分，它是保存在内存中的，所以不会造成回流问题。我们修改上面的代码如下：

 1 document.getElementById("btnAdd").onclick = function(){
 2     var list = document.getElementById("list");    
 3     var fragment = document.createDocumentFragment();
 4 
 5     for(var i = 0;i < 100; i++){
 6       var li = document.createElement("li");
 7         li.textContent = i;
 8         fragment.appendChild(li);
 9     }
10 
11     list.appendChild(fragment);
12 }

优化后的代码主要是创建了一个fragment，每次生成的li节点先添加到fragment，最后一次性添加到list。

创建型API总结

创建型api主要包括createElement，createTextNode，createDocumentFragment 三个方法，需要注意下面几点：
（1）它们创建的节点只是一个孤立的节点，要通过appendChild添加到文档中
（2）使用createDocumentFragment来解决添加大量节点时的性能问题

 

二、修改节点

appendChild

appendChild我们在前面已经用到多次，就是将指定的节点添加到调用该方法的节点的子元素的末尾。调用方法如下：

parent.appendChild(child);

child节点将会作为parent节点的最后一个子节点。

注意：如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方。

 1 <div id="child">
 2     要被添加的节点
 3 </div>
 4 <br/>
 5 <br/>
 6 <br/>
 7 <div id="parent">
 8     要移动的位置
 9 </div>        
10 <input id="btnMove" type="button" value="移动节点" />

11 document.getElementById("btnMove").onclick = function(){
12     var child = document.getElementById("child");
13     document.getElementById("parent").appendChild(child);
14 }

这段代码主要是获取页面上的child节点，然后添加到指定位置，可以看到原本的child节点被移动到parent中了。

注意：如果child绑定了事件，被移动时，它依然绑定着该事件。

insertBefore

insertBefore用来添加一个节点到一个参照节点之前，用法如下：

parentNode.insertBefore(newNode,refNode);

• parentNode表示新节点被添加后的父节点
• newNode表示要添加的节点
• refNode表示参照节点，新节点会添加到这个节点之前

 1 <div id="parent">
 2     父节点
 3     <div id="child">                
 4         子元素
 5     </div>
 6 </div>
 7 <input type="button" id="insertNode" value="插入节点" />

 8 var parent = document.getElementById("parent");
 9 var child = document.getElementById("child");
10 document.getElementById("insertNode").onclick = function(){
11     var newNode = document.createElement("div");
12     newNode.textContent = "新节点";
13     parent.insertBefore(newNode,child);
14 }

这段代码创建了一个新节点，然后添加到child节点之前。和appendChild一样，如果插入的节点是页面上的节点，则会移动该节点到指定位置，并且保留其绑定的事件。

关于第二个参数参照节点还有几个注意的地方：
（1）refNode是必传的，如果不传该参数会报错
（2）如果refNode是 undefined 或 null，则insertBefore会将节点添加到子元素的末尾

removeChild

removeChild顾名思义，就是删除指定的子节点并返回，用法如下：

var deletedChild = parent.removeChild(node);

deletedChild指向被删除节点的引用，它等于node，被删除的节点仍然存在于内存中，可以对其进行下一步操作。

注意：如果被删除的节点不是其子节点，则程序将会报错。我们可以通过下面的方式来确保可以删除：

1 if(node.parentNode){
2     node.parentNode.removeChild(node);
3 }

通过节点自己获取节点的父节点，然后将自身删除。

replaceChild

replaceChild用于使用一个节点替换另一个节点，用法如下。

parent.replaceChild(newChild,oldChild);

newChild是替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，则其将被转移到新的位置
oldChild是被替换的节点。

页面修改型API总结

页面修改型api主要是这四个接口，要注意几个特点：
（1）不管是新增还是替换节点，如果新增或替换的节点是原本存在页面上的，则其原来位置的节点将被移除，也就是说同一个节点不能存在于页面的多个位置
（2）节点本身绑定的事件不会消失，会一直保留着。