DOM编程艺术-节点操作之创建、插入、修改、删除

节点的创建、插入、修改和删除并不是一个个独立的操作，而是串联在一起。

1. 创建节点element=document.createElement(tagName)

首先节点需要通过element=document.createElement(tagName)被创建，也比较好理解，createElement（tagName）和getElementsByTageName的形式差不多，另外，创建节点似乎只能通过tagName，这个html的结构也相似，想在html中创建一个元素也是通过tagname。从DOM树去考虑，createElement（TagName）就相当于创建了一个节点，即一个树枝起始的位置。

element.textContent 可以截取出该元素内所有的文本内容。

2. 插入节点

var achild=element.appendChild(achild);

var achild=element.insertBefore(achild,referenceChild)

建立标签之后，需要通过appendChild插入节点。

var achild=element.appendChild(achild); 在指定的元素后面追加子元素，这里的achild也是一个标签名，凡是需要插入的标签都是需要先被建立。

在users这个节点后面插入h2和ul标签，原有html中id为users的div内部就被插入了h2和il标签，被插入前需要建立标签

一般情况下，节点的插入都是按照先后顺序的，但是如果想要在指定位置插入标签，就需要用到：var achild=element.insertBefore(achild,referenceChild);即在指定的子节点前面加入节点。

没有在指定节点之后插入节点是因为这样可以保证简洁。

achild是需要被插入的节点，而referenceChild则是参考点。

先创建，再插入。

3. 删除节点 child=element.removeChild(child)

child=element.removeChild(child):删除指定的子节点。可以看到这里是删除子节点，如果是删除自己点本身，那么首先需要获取到该节点，并赋值给一个变量元素，然后通过这个变量获取到相应的父节点，然后删除其子节点，也就是他本身。

首先要获取节点，然后通过父子关系将获取的节点删除

4. 插入一段html所有元素：element.innerHTML

申明一个变量li，创建一个li的节点，将该节点的类名命名为“user”，在ul中插入子节点li，并将一段html元素，即图片和一个内容为lifeng的标签插入li节点中

5. 总结

首先可以对比一下节点操作的所有表达式：

创建节点 ：

element=document.createElement(tagName)

插入节点 ：

var achild=element.appendChild(achild);

var achild=element.insertBefore(achild,referenceChild)

删除节点：

child=element.removeChild(child)

插入一段html所有元素：

element.innerHTML

1. 创建节点：针对整个文档的，可以不需要其他条件即可申明一个变量，然后创建节点赋值给他，例如var li=document.createElement("li")；就创建了一个li标签的节点，注意：这里变量“li”是在js中的变量，而括号里面的“li”代表着html的

标签。接着可以通过li.className="users"赋予js中li变量代表的

以users这个类名。

2. 插入节点：appendChild很能说明是插入子节点，也就是在DOM树上针对父节点增加分支，为了能够分支，那一定是要先获取父节点的。例如：

var users=document.getElementById('users');

var h2=document.createElement('h2');

h2.innerText='hello';

var li=document.createElement('li');

users.appendChild('h2');

users.appendChild('li');

这里的users就是通过Id获取的父节点，前面举例的图中并没有说明。这个过程就好像，我现在地图上通过查找高速公路编号找到了一条叫做users的大路（document.getElementById)，然后需要在这条大路两侧规划出两条支路，首先我得想好支路的名称，就叫支路一和支路二，那现在需要再把这两条支路安插（appendChild）在大路一侧。

3. 删除节点：这个和插入节点不一样，不需要先创造出子节点，而是要获取相应的节点，而且注意到是removeChild，即删除的是子节点。要注意的是，在js里操作一定要明确与html标签相同的元素其实都是变量，而不是标签。这样的话，就要将要改变的html和css的标签都对应到js中的节点来操作，这个在dom树里有说过，这里再说一次强化这个概念。

那这么看来，就要分别获取相对应的父节点和子节点:

var user=document.getElementById('user'); / 获取id名为user的节点赋值给user变量；

var users2=user.getElementByClassName('users')[1] / 通过user获取到类名为users的第二个子元素，并赋值给user2，user2就是对应的子节点；

user2.parentNode.removeChild(user2); /删除user2的父节点的子节点，也就是他本身；

上面这个例子也说明了DOM的一个基本规则，所有的操作都是针对节点，通过节点和html、css的对应关系来影响其结构。所以任何的节点操作，一定要将相应的元素转换成对应的节点，可以是获取，可以是创建。