JavaScript DOM节点和文档类型
以下的例子以此HTML文档结构为例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >
<ul >
<li ></li>
<li ></li>
<li ></li>
</ul><p ></p>
</div>
<script type="text/javascript" src="javascript_dom_1.js"></script>
</body>
</html>
获得子节点的集合：childNodes()
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类型。
获得元素的父节点：parentNode()
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 ></strong></p>
var p = document.getElementById("demo2");
console.log(p.firstChild.id);
console.log(p.lastChild.id);
运行结果：
strong_1
strong_2
判断是否有子节点：hasChildNodes()
若有子元素，返回true，否则，返回false
在子节点尾部插入节点：appendChild()
var newNode = document.createElement("div");
newNode.id = "newNode";
var getDemo = document.getElementById("demo1");
getDemo.appendChild(newNode);
console.log(getDemo.lastChild.id);
运行结果：
newNode
在子节点前面插入节点：insertBefore()
insertBefore(参数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);
运行结果：
newNode
替换子节点：replaceChild()
replaceChild(参数1，参数2)
- 参数1：要插入的节点
- 参数2：表示要被替换的节点
可参考insertBefore()的例子。
删除子节点：removeChild()
removeChild(参数1)
- 参数1：要删除的节点
克隆节点：cloneNode()
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
如果不传值，那么默认使用浅克隆。
Document类型
document的属性
- document.documentElement 指向
<html>元素 - document.body 指向
<body>元素 - document.doctype 指向
<!DOCTYPE>元素
HTMLDocument的属性
- document.title 取得文档的标题
- document.URL 取得完整的URL
- document.domain 取得域名
- document.referrer 取得来源页面的URL
查找元素
- document.getElementById(id) 按id查找，返回一个节点
- document.getElementsByTagName(tabName) 按标签名查找，返回一个集合
- document.getElementsByName(name) 按name查找，返回一个集合，此方法只有HTMLDocument类型才有
写入
- document.write()
示例：
document.write("<div>Hi,Michael!</div>");
var newNode = document.createElement("div");
newNode.innerHTML = "Hi,Michael!";
document.write(newNode.innerHTML);
以上两段代码的结果是相同的。
- document.writeln()
和write()一样，只不过会自动换行
参考
- 《JavaScript高级程序设计》
- 上一篇 »css排版之-标准文档流
- 下一篇 »JavaScript的DOM编程--07--节点的属性