DOM学习总结（六）DOM导航
什么是 HTML DOM 导航？
DOM是一个以节点关系组成的结构，所以我们可以使用节点之间的关联找到整个HTML页面中的元素
1.HTML DOM 节点列表：
getElementsByTagName("") 方法 //返回所查找元素的所有节点列表
节点列表是一个节点数组
可以通过下标访问这些节点（注意下标是从0开始）
2.HTML DOM 节点列表长度：
length 属性定义节点列表中节点的数量
可以使用 length 属性来循环节点列表
<p>Hello World!</p> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>length</b> property.</p> <script> x=document.getElementsByTagName("p"); //找到 p 标签的所有节点列表 for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br>"); } </script>
3.导航节点
使用三个节点属性，可以在文档结构中进行导航，从而找到任何我们想找到的元素
1.firstChild //当前获取到的元素的首个子元素
2.lastChild //当前获取的元素的最后一个子元素
3.parentNode //当前元素的父元素
比如：
以body为例
<body> //<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）
<p>蒙娜丽莎的微笑</p> //首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
<div> //<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<p>西门吹雪</p>
<p>叶孤城</p>
</div>
</body>
firstChild 属性可以用来访问元素的文本
<body> <p id="intro">大熊猫</p> </body> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); //输出结果为 大熊猫 </script>
DOM 根节点
这里有两个特殊的属性，可以访问全部文档：
document.documentElement - 全部文档
document.body - 文档的主体，把整个页面都获取到了
hildNodes属性 和 nodeValue属性
除了 innerHTML 属性，也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
借助getElementById 方法实现获取元素的文本内容
1 <p id="intro">Hello World!</p> 2 3 <script> 4 var 5 txt=document.getElementById("intro").childNodes[0].nodeValue; 6 7 document.write(txt); 8 9 </script>
