怎么在JavaScript中遍歷DOM元素？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比烈山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式烈山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋烈山地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

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

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

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

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

常見的幾種nodeType:

元素節(jié)點：1，

屬性節(jié)點：2，

文本節(jié)點：3，

注釋節(jié)點：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.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結(jié)果：

方式2：使用firstElementChild，nextElementSibling

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網(wǎng)頁名稱：怎么在JavaScript中遍歷DOM元素
當(dāng)前鏈接：http://www.chinadenli.net/article36/iphcsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、域名注冊、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)