快捷導(dǎo)航

JavaScript遍歷DOM元素的常見方式示例

更新時(shí)間：2019年02月16日 14:26:57 作者：TianyuCool

這篇文章主要介紹了JavaScript遍歷DOM元素的常見方式,涉及javascript中firstChild、lastChild、firstElementChild、nextElementSibling等函數(shù)遍歷dom元素相關(guān)使用技巧,需要的朋友可以參考下

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

對(duì)于元素之間的空格，IE9以及之前的版本不會(huì)返回文本節(jié)點(diǎn)，，其他的瀏覽器會(huì)返回文本節(jié)點(diǎn)，所以我們?cè)谑褂胒irstChild,lastChild時(shí)會(huì)導(dǎo)致行為不一致。

DOM中為元素新增了下面幾個(gè)屬性：

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

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

一般來(lái)說(shuō)，區(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測(cè)試上述代碼，可得如下運(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測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：