本文實(shí)例講述了JavaScript遍歷DOM元素的常見方式。分享給大家供大家參考，具體如下：

對于元素之間的空格，IE9以及之前的版本不會返回文本節(jié)點(diǎn)，，其他的瀏覽器會返回文本節(jié)點(diǎn)，所以我們在使用firstChild,lastChild時會導(dǎo)致行為不一致。

DOM中為元素新增了下面幾個屬性：

childElementCount：返回子元素（不包括文本節(jié)點(diǎn)和注釋）的數(shù)量；
firstElementChild：firstChild的元素版；
lastElementChild：lastChild的元素版;
previousElementSibling和nextElementSibling對應(yīng)著previousSibling，nextSibling的元素版

假設(shè)html如下，我們想遍歷出div中的所有元素節(jié)點(diǎn):

一般來說，區(qū)別元素節(jié)點(diǎn)，屬性節(jié)點(diǎn)，文本節(jié)點(diǎn)的通用方式是判斷該節(jié)點(diǎn)的nodeType。

常見的幾種nodeType:

元素節(jié)點(diǎn)：1，

屬性節(jié)點(diǎn)：2，

文本節(jié)點(diǎn)：3，

注釋節(jié)點(diǎn)：8，
……

<div id="list">
  <p>hello</p>
  <span>world</span>
  <em>cookieParse()</em>
</div>

方式1：用firstChild，lastChild進(jìn)行元素遍歷:

var list = document.getElementById('list');
var child = list.firstChild;
console.log(list.nextSibling)
while(child != list.lastChild){
  if(child.nodeType == 1){
    console.log( child );
  }
  child = child.nextSibling;
}

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運(yùn)行結(jié)果：

方式2：使用firstElementChild，nextElementSibling

var list = document.getElementById('list');
var child = list.firstElementChild;
while(child){
  console.log( child );
  child = child.nextElementSibling;
}

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運(yùn)行結(jié)果：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。