标签：get 否则 creat lang new als 浅复制 class source
以下的例子以此HTML文档结构为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="demo">
<ul id="contents">
<li id="li_1"></li>
<li id="li_2"></li>
<li id="li_3"></li>
</ul><p id="p_1"></p><p id="p_2"></p>
</div>
<script type="text/javascript" src="javascript_dom_1.js"></script>
</body>
</html>
var ul = document.getElementById("contents");
for(var i= 0 ; i < ul.childNodes.length; i++){
if(ul.childNodes[i].nodeType == "1"){
console.log(ul.childNodes[i].id);
}
}
运行结果：
li_1
li_2
li_3判断的节点的类型用 nodeType，下面列出一个表格表示不同类型的对应不同的值（常用）：
| 类型 | 值 |
|---|---|
| element | 1 |
| text | 3 |
| comment | 8 |
| document | 9 |
上面的例子中，节点包括text类型和element类型，所以要判断一下是否是element类型。
var li = document.getElementById("li_1");
console.log(li.parentNode.id);
运行结果：
conments
previousSibling : 获得上一个同胞节点
nextSibling : 获得下一个同胞节点
var p1 = document.getElementById("p_1");
console.log(p1.previousSibling.id);
console.log(p1.nextSibling.id);
运行结果：
contents
p_2我们看一下html代码，为什么<p>标签要放在ul后面，这里是为了方便测试，IE和其他浏览器在这里表现不同，对于其他浏览器，ul的子元素其实是有7个，而IE是3个，我们看到的确实是只有3个li，其他浏览器把li与li之间的换行视为有一个text节点，所以就有了7个节点。
firstChild:获得第一个子节点
lastChild:获得最后一个子节点
<p id="demo2"><strong id="strong_1"></strong><a id="a"></a><strong id="strong_2"></strong></p>
var p = document.getElementById("demo2");
console.log(p.firstChild.id);
console.log(p.lastChild.id);
运行结果：
strong_1
strong_2若有子元素，返回true，否则，返回false
var newNode = document.createElement("div");
newNode.id = "newNode";
var getDemo = document.getElementById("demo1");
getDemo.appendChild(newNode);
console.log(getDemo.lastChild.id);
运行结果：
newNodeinsertBefore(参数1，参数2)
- 参数1：要插入的节点
- 参数2：节点，表示在这个节点前面插入节点，若为null，则在末尾插入
var newNode = document.createElement("div");
newNode.id = "newNode";
var getDemo = document.getElementById("demo1");
getDemo.insertBefore(newNode,document.getElementById("contents"));
console.log(getDemo.childNodes[1].id);
运行结果：
newNodereplaceChild(参数1，参数2)
- 参数1：要插入的节点
- 参数2：表示要被替换的节点
可参考insertBefore()的例子。
removeChild(参数1)
- 参数1：要删除的节点
node.cloneNode(true|false)
- node:被克隆的节点
- 传入一个参数，如果是true，那么进行深复制（连同子节点一起复制），如果是false，那么进行浅复制，只复制节点本身。
var ul = document.getElementById("contents");
var deepClone = ul.cloneNode(true);
var shadowClone = ul.cloneNode(false);
console.log(deepClone.childNodes.length);
console.log(shadowClone.childNodes.length);
运行结果：
7
0如果不传值，那么默认使用浅克隆。
<html>元素<body>元素<!DOCTYPE>元素示例：
document.write("<div>Hi,Michael!</div>");
var newNode = document.createElement("div");
newNode.innerHTML = "Hi,Michael!";
document.write(newNode.innerHTML);
以上两段代码的结果是相同的。
和write()一样，只不过会自动换行
标签：get 否则 creat lang new als 浅复制 class source
原文地址：http://www.cnblogs.com/binmengxue/p/6092907.html
