JavaScript中怎么利用DOM實(shí)現(xiàn)文檔遍歷

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

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

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

var oBody=document.body;

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

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

首先我想把看一下我的導(dǎo)航條下有多少個(gè)子節(jié)點(diǎn)。我***想到的是前面我學(xué)過的查找元素的2種方法：

◆getElementById() # 通過ID屬性查找元素

該方法將返回一個(gè)與那個(gè)有著給定id屬性值的元素節(jié)點(diǎn)相對應(yīng)的對象。

◆getElementsByTagName() # 通過標(biāo)簽名稱查找元素

該方法返回一個(gè)對象數(shù)組，每個(gè)對象分別對應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素。

 /*  通過ID屬性查找元素 ，用的是文檔對象的getElementById()方法，  查找到我們想要的元素對象,根據(jù)這個(gè)節(jié)點(diǎn)元素的 childNodes 屬性，  遍歷出所有的子節(jié)點(diǎn)對象。  */  function queryElementsId(){    var elemensArray,nav,nav_list;    elemensArray=[];    nav=document.getElementById("nav");    /*注意IE和FF中處理Text節(jié)點(diǎn)上存在著一些差異*/       navnav_list=nav.childNodes;       for(var i=0;i

節(jié)點(diǎn)遍歷

那我們接下來，測一下是否是我們想要的東西：

 window.onload=function(){       /****個(gè)方法*/       var list= queryElementsId();     /*第二個(gè)方法*/   //var list= queryElementsTagName();    var s="";   for(var i=0;i

先看一下***個(gè)方法queryElementsId()好像我們在IE中沒有發(fā)現(xiàn)有什么問題，那我們在Firefox中看一下是否也是我們想要的結(jié)果。

這時(shí)，問題出現(xiàn)了，不同的瀏覽器在判斷何為Text節(jié)點(diǎn)上存在著一些差異,例如在A級瀏覽器中的FF和IE就有很大的差異，F(xiàn)ireFox會(huì)把元素之間的空白、換行、tab都是Text節(jié)點(diǎn),IE下會(huì)把空白全部忽略掉，只有內(nèi)聯(lián)元素（如em，span）后的換行、空格、tab會(huì)被認(rèn)為是一個(gè)Text。既然遇到了問題那我們就得解決問題，問題的根源我們也知道了，那相應(yīng)的解決方案就好做了。

方法一：

 /*  《精通javascript》上提供了一個(gè)函數(shù)，用于處理xm中的這些空格，其作用原理就是找出文本節(jié)點(diǎn)，并刪除這些節(jié)點(diǎn)，以達(dá)到刪除這些空格的目的。  */     function cleanWhitespace(element){      //如果不提供參數(shù)，則處理整個(gè)HTML文檔      elementelement = element || document;      //使用***個(gè)子節(jié)點(diǎn)作為開始指針      var cur = element.firstChild;         //一直到?jīng)]有子節(jié)點(diǎn)為止      while (cur != null){          //如果節(jié)點(diǎn)為文本節(jié)點(diǎn)，應(yīng)且包含空格          if ( cur.nodeType == && ! /\S/.test(cur.nodeValue)){              //刪除這個(gè)文本節(jié)點(diǎn)              element.removeChild( cur );                 //否則，它就是一個(gè)元素          } else if (cur.nodeType == 1){              //遞歸整個(gè)文檔              cleanWhitespace( cur );          }             curcur = cur.nextSibling;//遍歷子節(jié)點(diǎn)      }  }  

方法二：

    /*  ***，利用數(shù)組寫了一個(gè)函數(shù)，能夠有效的處理dom中的空格，其原理就是將一個(gè)元素的的父元素找出來，然后通過它父元素的childNodes屬性找出該元素的所有兄弟元素。遍歷該元素和它的兄弟元素，將所有元素節(jié)點(diǎn)放在一個(gè)數(shù)組里。這樣調(diào)用這個(gè)數(shù)組，就只有元素節(jié)點(diǎn)而沒有文本節(jié)點(diǎn)，也就沒有了討厭的空格.     */     function cleanWhitespaces(elem){      //如果不提供參數(shù)，則處理整個(gè)HTML文檔   var elemelem = elem || document;    var parentElem = elem.parentNode; //返回一個(gè)節(jié)點(diǎn)的父類節(jié)點(diǎn)   var childElem = parentElem.childNodes; //返回一個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)的節(jié)點(diǎn)列表   var childElemArray = new Array;    for (var i=0; i

方法三：推薦

 /*  原理是對元素的所有的子節(jié)點(diǎn)做一個(gè)遍歷。然后做一個(gè)判斷，如果是子元素節(jié)點(diǎn)（nodeType = 1），則遍歷該子元素的所有的子節(jié)點(diǎn)，用遞歸檢查是否包含空白節(jié)點(diǎn)；如果處理的子節(jié)點(diǎn)是文本節(jié)點(diǎn)（nodeType = 3），則檢查是否是純粹的空白節(jié)點(diǎn)，如果是，就將它從xml對象中刪除。  */  function removeWhitespace(xml){      var loopIndex;         for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++){          var currentNode = xml.childNodes[loopIndex];          if (currentNode.nodeType == 1){              removeWhitespace(currentNode);          }             if (((/^\s+$/.test(currentNode.nodeValue))) &&(currentNode.nodeType == 3)){              xml.removeChild(xml.childNodes[loopIndex--]);          }      }  }  

好了，我們在驗(yàn)證一下，#Text節(jié)點(diǎn)問題是否處理掉了。那我們就用方法3 中removeWhitespace(nav)方法來處理queryElementsId()方法中的#Text節(jié)點(diǎn)問題。

 function queryElementsId(){    var elemensArray,nav,nav_list;    elemensArray=[];    nav=document.getElementById("nav");    /*處理#Text節(jié)點(diǎn)問題*/    removeWhitespace(nav);       /*注意IE和FF中處理Text節(jié)點(diǎn)上存在著一些差異*/       navnav_list=nav.childNodes;       for(var i=0;i

正如看到的結(jié)果，IE和FireFox中都沒有問題了。

一個(gè)比較通用的方法：

 function text(elem){   var t="";   //如果傳入的是元素，則繼續(xù)遍歷其子元素   //否則假定它是一個(gè)數(shù)組   elemelem=elem.childNodes || elem;   //遍歷所有子節(jié)點(diǎn)   for(var i=0; i

用元素節(jié)點(diǎn)的DOM屬性遍歷DOM樹

 window.onload=function(){    /*定位想要的節(jié)點(diǎn)*/    var nav=document.getElementById("nav");    /*查找父節(jié)點(diǎn)*/    var p_n=nav.parentNode;    alert("父節(jié)點(diǎn)的元素名稱："+p_n.nodeName);       /*處理FF遍歷節(jié)點(diǎn)中的#Text */    removeWhitespace(nav);//移除所有的空Text節(jié)點(diǎn)       /*查找子節(jié)點(diǎn)*/      var c_n_f=nav.firstChild;//***個(gè)節(jié)點(diǎn)對象    //var c_n_f=nav.childNodes[0];//同上一樣的結(jié)果    var c_n_l=nav.lastChild;//***一個(gè)節(jié)點(diǎn)對象    //var c_n_l=nav.childNodes[nav.childNodes.length-1];//同上一樣的結(jié)果    alert("***個(gè)節(jié)點(diǎn)："+c_n_f.nodeName+"  "+"***一個(gè)節(jié)點(diǎn) ："+c_n_l.nodeName);     /*查找兄弟節(jié)點(diǎn) 或叫 相鄰節(jié)點(diǎn) */    /*用nextSibling和PreviousSibling必須有一個(gè)參考點(diǎn)，這樣指針才知道自己往那里移動(dòng)*/    var c_n_s=c_n_f.nextSibling;//***個(gè)節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)    alert("***個(gè)節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)："+c_n_s.innerHTML+ "\n" + "節(jié)點(diǎn)中包含的HTML內(nèi)容： "+c_n_s.nodeName);     }  

寫到這里，既然標(biāo)準(zhǔn)的previousSibling，nextSibling，firstChild，lastChild，parentNode遍歷方法有瀏覽器不兼容問題。我上面的解決方案是去掉遍歷元素的相關(guān)空的#Text節(jié)點(diǎn)，是一個(gè)好的解決方案，但是使用起來不方便，我們何不自己寫一些遍歷節(jié)點(diǎn)的方法來代替標(biāo)準(zhǔn)的的previousSibling，nextSibling，firstChild，lastChild，parentNode。

我們的思路是利用元素是nodeType屬性來判斷元素是節(jié)點(diǎn)類型中那種節(jié)點(diǎn)類型，在DOM節(jié)點(diǎn)中我最常用的是元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，屬性節(jié)點(diǎn)，對應(yīng)的類型值是元素節(jié)點(diǎn)nodeType=1 or ELEMENT_NODE, 文本節(jié)點(diǎn) nodeType=2 or ATTRIBUTE_NODE,屬性節(jié)點(diǎn) nodeType=3 or TEXT_NODE,但是IE中并不支持命名常量，那就用數(shù)值吧，再配合標(biāo)準(zhǔn)的遍歷屬性。完全可以自己生產(chǎn)一些輔助函數(shù)來取代標(biāo)準(zhǔn)的遍歷方式。以下一系列的輔助函數(shù)可以幫助您，他們能取代標(biāo)準(zhǔn)的previousSibling，nextSibling，firstChild，lastChild，parentNode；

 //---------DOM 遍歷，如果元素沒找到則返回null---------//          //---查找相關(guān)元素的前一個(gè)兄弟元素---//         function prev(elem){              do{                 elemelem=elem.previousSibling;              }while(elem && elem.nodeType!=1);              return elem;          }          //---查找相關(guān)元素的下一個(gè)兄弟元素---//          function next(elem){             do{                 elemelem=elem.nextSibling;              }while(elem && elem.nodeType!=1);              return elem;          }          //---查找***個(gè)子元素的函數(shù)---//          function first(elem){              elemelem=elem.firstChild;              return elem && elem.nodeType!=1 ?next(elem):elem;          }          //---查找***一個(gè)子元素的函數(shù)---//          function last(elem){              elemelem=elem.lastChild;              return elem && elem.nodeType!=1 ?prev(elem):elem;          }          //---查找父級元素的函數(shù)---//          //num是父級元素的級次，parent(elem,2)等價(jià)于     function parent(elem,num){              numnum=num||1;              for(var i=0; i

以上就是JavaScript 中怎么利用DOM實(shí)現(xiàn)文檔遍歷，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。