DOM编程艺术 4

 <div id="header" title="this is test title">
     first child node
     <br />
     second child node
     <p>this is footer</p>
 </div>
 <div id="content">content .....</div>
 <div id="footer">footer</div>

1.获得所有的div对象

var div = document.getElementsByTagName("div");

2.获得header节点

var header = document.getElementsByTagName("div")[0];

或者

var header = document.getElementById("header");

3.header节点对象的常用属性（childNodes、nodeType、nodeValue、firstChild、lastChild）

4.childNodes  //检索元素的所有子节点

header.childNodes.length　　//return 5

header.childNodes[0]　　　　//return first child node　　　　文本节点

header.childNodes[1]　　　　//return <br />　　　　　　　　元素节点　　　　　　　　　

header.childNodes[2]　　　　//return second child node　　 文本节点

header.childNodes[3]　　　　//return <p>this is footer</p>　　元素节点

header.childNodes[4]　　　　//return Text对象

节点的三种类型：文本节点、元素节点、属性节点

nodeTyoe来判断节点类型；

元素节点的nodeTyoe属性值是1；

属性节点的nodeTyoe属性值是2；

文本节点的nodeTyoe属性值是3；

5.获得footer节点的文本值

var footer = document.getElementById("footer");

footer.nodeValue　　//return null

为什么？

因为此元素里的文本是另一种节点，它在DOM里是元素的第一个子节点，也就是说，要获得footer的文本值，就必须检索它的第一个子节点的nodeValue属性值。

footer.childNodes[0].nodeValue　　//footer

footer.childNodes[0] == footer.firstChild　　//return true;

好了，今天先到这里吧^O^