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

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

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

childElementCount：返回子元素（不包括文本節點和注釋）的數量；
firstElementChild：firstChild的元素版；
lastElementChild：lastChild的元素版;
previousElementSibling和nextElementSibling對應著previousSibling，nextSibling的元素版

假設html如下，我們想遍歷出div中的所有元素節點:

一般來說，區別元素節點，屬性節點，文本節點的通用方式是判斷該節點的nodeType。

常見的幾種nodeType:

元素節點：1，

屬性節點：2，

文本節點：3，

注釋節點：8，
……

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

方式1：用firstChild，lastChild進行元素遍歷:

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代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼，可得如下運行結果：

方式2：使用firstElementChild，nextElementSibling

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

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼，可得如下運行結果：

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

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