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