0 Comments

JavaScript DOM文档遍历实战(1)

发布于:2013-12-09  |   作者:广州网站建设  |   已聚集:人围观

在介绍了《JavaScript DOM修改文档树方法实例》与《JavaScript DOM实战:创建和克隆元素》,本文将介绍JavaScript DOM文档遍历的详细知识,我们先从HTML页面最基本的组成元素讨论起:


  1. <!--<html> 
  2.     <head> 
  3.         <title>DOM Examlie</title> 
  4.     </head> 
  5.     <body> 
  6.        <p>Hello World !</p> 
  7. </body> 
  8. </html>-->  

访问<html>元素,你应该明白它是该文件的document元素,那你就可以使用document的documentElement属性:
广州网站建设,网站建设,广州网页设计,广州网站设计


  1. var oHtml=document.documentElement;//可以直接访问<html>元素  
  2. alert("节点名称 : "+oHtml.nodeName);//节点名称  
  3. alert("节点类型 : "+oHtml.nodeType);//节点类型为 1  

获取<head> 和 <body>元素:


  1. var oHead=oHtml.firstChild;//HEAD节点  
  2. var oBody=oHtml.lastChild;//BODY节点  

也可以通过childNodes属性,获取<head> 和 <body>元素:


  1. var oHead=oHtml.childNodes.item(0);//HEAD节点  
  2. //var oHead=oHtml.childNodes[0];//简写,也有同样的结果是HEAD节点  
  3. var oBody=oHtml.childNodes.item(1);//BODY节点  
  4. //var oBody=oHtml.childNodes.item(1);//简写,也有同样的结果是BODY节点  

注意:方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法:HTML DOM 中的专有属性 document.body ,它常用于直接访问元素:
广州网站建设,网站建设,广州网页设计,广州网站设计


  1. var oBody=document.body;  

既然我们都知道了以上节点对象的获取方式,那我们用oHtml,oHead,oBody 这三个变量来确定一下它们之间的关系:


  1. alert(oHead.parentNode==oHtml);//HEAD节点的父节点是BODY节点,返回 true   
  2. alert(oBody.parentNode==oHtml);//BODY节点的父节点是BODY节点,返回 true   
  3. alert(oBody.previousSibling==oHead);//BODY节点的上一个兄弟节点是HEAD节点 ,返回 true  
  4. alert(oHead.nextSibling==oBody);//HEAD节点的下一个兄弟节点是BODY节点,返回 true  
  5. alert(oHead.ownerDocument==document); //返回一个节点的根元素(Document),HEAD节点是否指向该文档,返回 true  

通过上面的学习我们已经了解遍历节点的最基本的方式, 也学会了如何找到某一个节点的兄弟节点及它的子节点。

飞机