JavaScript DOM总结（二、节点操作）
一、创建节点
1、createElement()
createElement() 方法创建元素节点。该方法接收一个String类型的参数，表示所创建元素节点的名称，并返回 Element 对象。
2、createTextNode()
createTextNode() 创建文本节点。该方法接收一个String类型的参数，表示文本节点的文本，并返回一个文本节点对象。
3、createAttribute()
createAttribute()方法用于创建一个指定名称的属性，并返回Attr对象属性。
下面程序展示了上述几个方法的使用：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建节点title>
<style type="text/css">
.democlass{
color : red;
}
style>
head>
<body>
body>
<script type="text/javascript">
window.onload = function(){
var div = document.createElement("div"); // 创建div节点
var attr = document.createAttribute("class"); // 创建属性节点
attr.value = "democlass"; // 设置属性节点的值
div.setAttributeNode(attr); // 设置div的属性节点为所创建的属性节点
var text = document.createTextNode("这是text节点"); // 创建文本节点
div.appendChild(text); // 文本节点添加为div的子节点
document.body.appendChild(div); // 添加div为body的子节点
};
script>
html>二、获取节点
1、使用 getElementById() 方法
该方法通过指定的id来获取元素节点，返回指定id的元素。
为了测试获取节点的方法，先搭建如下HTML DOM结构（下面几种方法都以这个为准）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素节点title>
head>
<body>
<div id="mydiv">
<p id="p1" class="classP">我是p1段落p>
<p id="p2" class="classP">我是p2段落p>
<input type="text" name="myinput" value="sean" />
div>
body>
html>JavaScript代码如下：
var p1 = document.getElementById("p1");
console.log(p1); //
console.log(p1.innerHTML); // 我是p1段落由于id一般都是唯一的，因此返回的元素只有一个。如果仔细观察，我们也可以发现getElementById()用的单数，而下面的方法用的都是复数。
2、使用getElementsByTagName() 方法
该方法通过标签名来获取元素节点，返回所有该标签名的元素。
var ps = document.getElementsByTagName("p");
console.log(ps); // HTMLCollection[p#p1.classP, p#p2.classP]
for (var i = 0; i < ps.length; i++) {
console.log(ps[i].innerHTML);
}
// 我是p1段落
// 我是p2段落在Firefox浏览器测试下，通过标签名得到的是所有该标签的元素集合，我们可以通过for循环去遍历集合中的每一个元素。
3、使用getElementsByName() 方法
该方法通过元素的name属性来获取元素节点，返回所有该name属性的元素节点。
var input = document.getElementsByName("myinput");
console.log(input); // Firefox： NodeList[input 属性(attribute)值 = "sean"]
console.log(input); // IE： "1">...
console.log(input.length); // 1
console.log(input[0].value); // sean在Firefox浏览器下测试，通过name属性得到的一个NodeList对象，但是在IE下得到的是HTMLCollection集合，这两者都返回的是 Node 集合与 Node，只是后者多了一个nameItem 方法可用。在我们基本使用中基本上没有差别。
4、使用getElementsByClassName() 方法
该方法通过元素的类名来获取元素，同样返回的是所有该类名的元素节点。
var classp1 = document.getElementsByClassName("classP");
console.log(classp1); //HTMLCollection[p#p1.classP, p#p2.classP]
console.log(classp1.length); // 2
console.log(classp1[0].innerHTML); // 我是p1段落需要注意的是，该方法在IE8及之前的版本都不支持，需要自己实现。
三、节点操作
另外还有一些关于节点的操作列在下面的表格中，并一一进行测试：
| 方法 | 描述 |
|---|---|
| appendChild() | 把新的子节点添加到指定节点 |
| insertBefore() | 在指定的子节点前面插入新的子节点 |
| replaceChild() | 替换子节点 |
| removeChild() | 删除子节点 |
| cloneNode() | 克隆节点 |
下面通过代码来演示上述方法的基本用法：
1、appendChild()
appendChild()方法用于向某节点的子节点列表的末尾添加一个节点。添加节点后， childNodes 的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。该方法还会返回新增的节点。
首先构建HTML DOM结构：
<div id="mydiv">
<p id="p1">我是段落p1p>
<p id="p2">我是段落p2p>
div>javascript代码如下：
//先创建一个新节点
var p3 = document.createElement("p");
p3.innerHTML = "我是段落p3";
var div = document.getElementById("mydiv");
//将p2节点添加到div最后一个子节点
var newnode = div.appendChild(p3);
console.log(newnode===div.lastChild); // true2、insertBefore()
insertBefore()方法用于把节点放在 childNodes 列表中某个特定的位置上，而不是放在末尾。该方法接收两个参数：需要插入的新节点以及位置参考节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null，则 insertBefore()与 appendChild()执行相同的操作
//先创建一个新节点
var newP = document.createElement("p");
newP.innerHTML = "我是新建的段落";
var div = document.getElementById("mydiv");
//插入后成为最后一个子节点
var newLastNode = div.insertBefore(newP, null);
console.log(newLastNode===div.lastChild); // true
//插入后成为第一个子节点
var newFirstNode = div.insertBefore(newP,div.firstChild);
console.log(newFirstNode===div.firstChild); //true
//插入到P2子节点前面
var p2 = document.getElementById("p2");
var newnode = div.insertBefore(newP,p2);
console.log(p2.previousSibling===newnode); //true3、replaceChild()
replaceChild()用于替换子节点，该方法接收两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。
//先创建一个新节点
var newP = document.createElement("p");
newP.innerHTML = "我是新建的段落";
var div = document.getElementById("mydiv");
//替换P1元素
var p1 = document.getElementById("p1");
var returnedNode = div.replaceChild(newP, p1);
console.log(p1===returnedNode); //true4、removeChild()
removeChild()方法用于删除子节点，这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值。
var div = document.getElementById("mydiv");
var p1 = document.getElementById("p1");
var removedNode = div.removeChild(p1);
console.log(removedNode); // "p1">
注意：前面介绍的四个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点（使用 parentNode 属性）。另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用了这些方法，将会导致错误发生。
5、cloneNode()
cloneNode()用于克隆节点，该方法接受一个布尔值参数，表示是否执行深复制。在参数为 true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为 false 的情况下，执行浅复制，即只复制节点本身。
var div = document.getElementById("mydiv");
var deepList = div.cloneNode(true);
console.log(deepList.childNodes.length); // 5 (IE<9时为2)
var shollowList = div.cloneNode(false);
console.log(shollowList.childNodes.length); // 0