DOM的基本操作

目录

一、节点创建型API 

1.1 createElement

1.2 createTextNode

1.3 cloneNode

 二、页面修改形API

2.1 appendChild 

2.2 insertBefore

2.3 removeChild

2.4 replaceChild

三、元素属性型操作

3.1 getAttribute()(获取属性)

3.2 createAttribute()(创建属性)

3.3 setAttribute()(设置属性)

3.4 romoveAttribute()(删除属性)

四、innerText和innerHTML

---

一、节点创建型API 

在这里，我将常用的DOM操作api进行分类，首先要介绍的是创建型的api。这一类型的api，简而言之就是用来创建节点的

1.1 createElement

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

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

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

1.2 createTextNode

createTextNode用来创建一个文本节点，用法如下

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

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

1.3 cloneNode

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

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 传入true
parent2.id = "parent2";

这段代码通过cloneNode复制了一份parent元素，其中cloneNode的参数为true，表示parent的子节点也被复制，如果传入false，则表示只复制了parent节点

这里有几点要注意：
和createElement一样，cloneNode创建的节点只是游离有html文档外的节点，要调用appendChild方法才能添加到文档树中
如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id
调用接收的bool参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同
除此之外，我们还有一个需要注意的点：
如果被复制的节点绑定了事件，则副本也会跟着绑定该事件吗？这里要分情况讨论：
如果是通过addEventListener或者比如onclick进行绑定事件，则副本节点不会绑定该事件
如果是内联方式绑定比如
<div onclick="showParent()"></div>