在介紹了《JavaScript DOM修改文檔樹方法實例》與《JavaScript DOM實戰(zhàn)：創(chuàng)建和克隆元素》，本文將介紹JavaScript DOM文檔遍歷的詳細(xì)知識，我們先從HTML頁面最基本的組成元素討論起：

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、池州ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的池州網(wǎng)站制作公司

訪問元素，你應(yīng)該明白它是該文件的document元素，那你就可以使用document的documentElement屬性：

 
 
 

  
  
  
var oHtml=document.documentElement;//可以直接訪問元素  
  
  
  
alert("節(jié)點名稱 : "+oHtml.nodeName);//節(jié)點名稱  
  
  
  
alert("節(jié)點類型 : "+oHtml.nodeType);//節(jié)點類型為 1  
 
 
 

獲取 和 元素：

 
 
 

  
  
  
var oHead=oHtml.firstChild;//HEAD節(jié)點  
  
  
  
var oBody=oHtml.lastChild;//BODY節(jié)點  
 
 
 

也可以通過childNodes屬性，獲取 和 元素：

 
 
 

  
  
  
var oHead=oHtml.childNodes.item(0);//HEAD節(jié)點  
  
  
  
//var oHead=oHtml.childNodes[0];//簡寫,也有同樣的結(jié)果是HEAD節(jié)點  
  
  
  
var oBody=oHtml.childNodes.item(1);//BODY節(jié)點  
  
  
  
//var oBody=oHtml.childNodes.item(1);//簡寫,也有同樣的結(jié)果是BODY節(jié)點  
 
 
 

注意：方括號標(biāo)記其實是NodeList在javascript中的簡便實現(xiàn)。實際上正式的從childNodes列表中獲取子節(jié)點的方法是使用item()方法：HTML DOM 中的專有屬性 document.body ，它常用于直接訪問元素：

 
 
 

  
  
  
var oBody=document.body;  
 
 
 

既然我們都知道了以上節(jié)點對象的獲取方式，那我們用oHtml，oHead，oBody 這三個變量來確定一下它們之間的關(guān)系：

 
 
 

  
  
  
alert(oHead.parentNode==oHtml);//HEAD節(jié)點的父節(jié)點是BODY節(jié)點，返回 true   
  
  
  
alert(oBody.parentNode==oHtml);//BODY節(jié)點的父節(jié)點是BODY節(jié)點，返回 true   
  
  
  
alert(oBody.previousSibling==oHead);//BODY節(jié)點的上一個兄弟節(jié)點是HEAD節(jié)點 ，返回 true  
  
  
  
alert(oHead.nextSibling==oBody);//HEAD節(jié)點的下一個兄弟節(jié)點是BODY節(jié)點，返回 true  
  
  
  
alert(oHead.ownerDocument==document); //返回一個節(jié)點的根元素(Document),HEAD節(jié)點是否指向該文檔，返回 true  
 
 
 

通過上面的學(xué)習(xí)我們已經(jīng)了解遍歷節(jié)點的最基本的方式， 也學(xué)會了如何找到某一個節(jié)點的兄弟節(jié)點及它的子節(jié)點。

#p#

復(fù)雜的節(jié)點遍歷

在上面的學(xué)習(xí)中我們好像沒有遇到過大的阻礙，下面我們以一個“導(dǎo)航條”為實例：

 
 
 

  
  
  
 
  
  
  
    
我的導(dǎo)航條
            
  
  
  
     
  
  
  
       
HOME
 
  
  
  
       
(X)Html / Css
 
  
  
  
       
Ajax / RIA
 
  
  
  
       
GoF
 
  
  
  
       
JavaScript
 
  
  
  
       
JavaWeb
 
  
  
  
       
jQuery
 
  
  
  
       
MooTools
 
  
  
  
       
Python
 
  
  
  
       
Resources