JavaScript—DOM节点的增删改查

节点的类型

首先，来说一下DOM中节点的类型。标准的DOM定义中有12种节点，但是最常用的就是元素节点、文本节点和属性节点。用.nodeType属性就可以获得节点类型的常数值。

节点类型	nodeType
元素节点	1
文本节点	3
属性节点	2

增

节点的增加主要分为两个步骤：1.创建节点　2.追加节点
1. 创建节点
　1）创建元素节点

var node = document.createElement("标签名");

　2）创建文本节点

var textNode = document.createTextNode("文本");

当然也可以直接为元素追加文本，有两种方法，分别是：

<节点>.innerHTML = "文本";
<节点>.innerText = "文本";

它俩的区别就是：当文本中有HTML代码时，innerHTML会先解析后显示，而innerText会原样输出。
　3）创建属性节点

<节点>.setAttribute("属性名","属性值");

上面这种方式保准方法，可以添加任意的属性。当然有些属性也可以通过下面这种方法增加：

<node>.属性名 = 值;

2. 追加节点
　1）追加到尾部

父节点.appendChild(子节点);

　2）插入到某一个元素的前面
　如果要插入到某一个元素的前面，必须先获得此元素以及父元素。

父节点.insertBefore(新元素,旧元素);

删

父节点.removeChild(子节点);

因为浏览器执行javascript代码比较耗资源，所以如果我们要删除一个节点时，我们经常做的不是删除而是直接将其隐藏。

改

所谓修改节点就是修改节点的属性与包含的文本。
修改属性的方式与添加属性的方式是一样的：

//标准方法
<node>.setAttribute(“属性名”,“值”)
//Dom方法
<node>.属性名 = 值;

获得某个属性的值：

//标砖方法
<node>.getAttribute(“属性名”);
//Dom方法
var v = <node>.属性名;

查

查就是如何获得某个元素，是我们平时用的最多的方法了，我们既可以通过Id获得某个元素，也可以通过标签名获得多个元素。
1）根据Id获得单个元素

document.getElementById("Id");

2）根据标签名获得元素数组

document.getElementByTagName("标签名");
//标签名也可以用*来代替，这样就是获取文档内的所有元素了
document.getElementByTagName("*");
//获得指定父节点下所有名字符合要求的节点
父节点.document.getElementByTagName("标签名");

3）利用属性来获取指定父节点下的所有子节点

//获得所有的子节点
<node>.childNodes
//获取第一个子节点
<node>.firstChild
//获取最后一个子节点
<node>.lastChild