JavaScript DOM文档遍历实战(1)
在介绍了《 JavaScript DOM修改文档树方法实例 》与《 JavaScript DOM实战：创建和克隆元素 》，本文将介绍JavaScript DOM文档遍历的详细知识，我们先从HTML页面最基本的组成元素讨论起： !--
在介绍了《JavaScript DOM修改文档树方法实例》与《JavaScript DOM实战：创建和克隆元素》，本文将介绍JavaScript DOM文档遍历的详细知识，我们先从HTML页面最基本的组成元素讨论起：
- <!--<html>
- <head>
- <title>DOM Examlie</title>
- </head>
- <body>
- <p>Hello World !</p>
- </body>
- </html>-->
访问<html>元素，你应该明白它是该文件的document元素，那你就可以使用document的documentElement属性：
- var oHtml=document.documentElement;//可以直接访问<html>元素
- alert("节点名称 : "+oHtml.nodeName);//节点名称
- alert("节点类型 : "+oHtml.nodeType);//节点类型为 1
获取<head> 和 <body>元素：
- var oHead=oHtml.firstChild;//HEAD节点
- var oBody=oHtml.lastChild;//BODY节点
也可以通过childNodes属性，获取<head> 和 <body>元素：
- var oHead=oHtml.childNodes.item(0);//HEAD节点
- //var oHead=oHtml.childNodes[0];//简写,也有同样的结果是HEAD节点
- var oBody=oHtml.childNodes.item(1);//BODY节点
- //var oBody=oHtml.childNodes.item(1);//简写,也有同样的结果是BODY节点
注意：方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法：HTML DOM 中的专有属性 document.body ，它常用于直接访问元素：
- var oBody=document.body;
既然我们都知道了以上节点对象的获取方式，那我们用oHtml，oHead，oBody 这三个变量来确定一下它们之间的关系：
- alert(oHead.parentNode==oHtml);//HEAD节点的父节点是BODY节点，返回 true
- alert(oBody.parentNode==oHtml);//BODY节点的父节点是BODY节点，返回 true
- alert(oBody.previousSibling==oHead);//BODY节点的上一个兄弟节点是HEAD节点 ，返回 true
- alert(oHead.nextSibling==oBody);//HEAD节点的下一个兄弟节点是BODY节点，返回 true
- alert(oHead.ownerDocument==document); //返回一个节点的根元素(Document),HEAD节点是否指向该文档，返回 true
通过上面的学习我们已经了解遍历节点的最基本的方式， 也学会了如何找到某一个节点的兄弟节点及它的子节点。
精彩图集
精彩文章