childNodes表示的就是孩子的意思,其中需要注意的几点是:
1.table和ul的区别
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
<table border='1'>
<tr><td>111</td><td>111</td></tr>
<tr><td>222</td><td>222</td></tr>
<tr><td>333</td><td>333</td></tr>
</table>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<div id="a">
<p></p>
<a></a>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var table = document.getElementsByTagName("table")[0].childNodes;
console.log(table[0].nodeName);//#text
console.log(table[1].nodeName);//TBODY
console.log(table[2].nodeName);//报错,因为已经超出界限了
console.log(table.length);//2
var ul = document.getElementsByTagName("ul")[0].childNodes;
console.log(ul[0].nodeName);//#text
console.log(ul[1].nodeName);//LI
console.log(ul[2].nodeName);//#text
console.log(ul[3].nodeName);//LI
console.log(ul.length);//7
var a = document.getElementById("a").childNodes;
console.log(a[1].nodeName);//#text
console.log(a[1].nodeName);//P
console.log(a[2].nodeName);//A
console.log(a[3].nodeName);//超出界限
}
//从上面的实例我们可以看出,table和ul是不一样的,table其实就相当于<table><tbody></tbody></table>,
// 所以table[0]是文本,table[0].nodeName为#text;table[1]就是tbody,table[1].nodeName为TBODY;
// 而ul就不一样,ul[0]为文本,ul[1]为li,ul[2]为文本,ul[3]为li
</script>
</body>
</html>
2.节点属性
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :
1. nodeName : 节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
一、nodeName 属性: 节点的名称,是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性:节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9