JavaScript操作DOM常用API总结(重点)

JavaScript操作DOM常用API总结

节点创建型api（4个） 就是用来创建节点的

createElement():通过传入指定的标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签(IE8以下的浏览器不支持自定义标签)。

例如: 创建一个div元素

var div = document.createElement("div")
//要注意的是：使用createElement创建的元素并不属于html文档，它只是被创建出来，并没有添加到html中，要调用appendChild或者insertBefore等方法将其添加到HTML文档树中。

createTextNode():用来创建一个文本节点
例如：创建一个文本节点

var textNode = document.createTextNode("一个TextNode")
//createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要appendChild将其添加到HTML文档树中

cloneNode():是用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素。
使用如下：

1 var parent = document.getElementById("parentElement"); 
2 var parent2 = parent.cloneNode(true);// 传入true
3 parent2.id = "parent2";
//这段代码通过cloneNode复制了一份parent元素，其中cloneNode的参数为true，表示parent的子节点也被复制，如果传入false，则表示只复制了parent节点。

看例子：

 1 <div id="parent">
 2     我是父元素的文本
 3     <br/>
 4     <span>
 5         我是子元素
 6     </span>
 7 </div>
 8 <button id="btnCopy">复制</button>
 9 
10 var parent = document.getElementById("parent");
11 document.getElementById("btnCopy").onclick = function(){
   
12     var parent2 = parent.cloneNode(true);
13     parent2.id = "parent2";
14     document.body.appendChild(parent2);
15 }

这段代码很简单，主要是绑定button事件，事件内容是复制了一个parent，修改其id，然后添加到文档中。
这里有几点要注意：
（1）和createElement一样，cloneNode创建的节点只是游离有html文档外的节点，要调用appendChild方法才能添加到文档树中
（2）如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id
（3）调用接收的bool参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同

除此之外，我们还有一个需要注意的点：
如果被复制的节点绑定了事件，则副本也会跟着绑定该事件吗？这里要分情况讨论：
（1）如果是通过addEventListener或者比如onclick进行绑定事件，则副本节点不会绑定该事件
（2）如果是内联方式绑定比如

<div onclick="showParent()"></div>

这样的话，副本节点同样会触发事件。

createDocumentFragment():此方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中。
看例子：

 1 <ul id