通过 HTML DOM，您能够使用节点关系在节点树中导航。
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
下面的代码选取文档中的所有 <p> 节点：
| var x=document.getElementsByTagName("p"); |
可以通过下标号访问这些节点。如需访问第二个 <p>，您可以这么写：
| y=x[1]; |
注意： 下标号从 0 开始。
length 属性定义节点列表中节点的数量。
您可以使用 length 属性来循环节点列表：
| x=document.getElementsByTagName("p"); |
| for (i=0;i<x.length;i++) |
| { |
| document.write(x[i].innerHTML); |
| document.write("<br />"); |
| } |
实例解析：
您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。
请看下面的 HTML 片段：
| <html> |
| <body> |
| <p>Hello World!</p> |
| <div> |
| <p>The DOM is very useful!</p> |
| <p>This example demonstrates node relationships.</p> |
| </div> |
| </body> |
| </html> |
firstChild 属性可用于访问元素的文本：
| <html> |
| <body> |
| <p id="intro">Hello World!</p> |
| <script> |
| x=document.getElementById("intro"); |
| document.write(x.firstChild.nodeValue); |
| </script> |
| </body> |
| </html> |
这里有两个特殊的属性，可以访问全部文档：
| <html> |
| <body> |
| <p>Hello World!</p> |
| <div> |
| <p>The DOM is very useful!</p> |
| <p>This example demonstrates the <b>document.body</b> property.</p> |
| </div> |
| <script> |
| alert(document.body.innerHTML); |
| </script> |
| </body> |
| </html> |
除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
下面的代码获取 id="intro" 的 <p> 元素的值：
| <html> |
| <body> |
| <p id="intro">Hello World!</p> |
| <script> |
| var txt=document.getElementById("intro").childNodes[0].nodeValue; |
| document.write(txt); |
| </script> |
| </body> |
| </html> |
在本教程中，我们将使用 innerHTML 属性。不过，学习上面的方法有助于对 DOM 树结构和导航的理解。
