JavaScript遍历DOM元素的常见方式示例

DOM遍历概述与兼容性差异

本文介绍了JavaScript中遍历DOM元素的几种常用方法，供读者参考学习。

在处理元素间的空白节点时，不同浏览器存在行为差异：IE9及更早版本不会将空格识别为文本节点，而其他浏览器则会返回文本节点。这种差异导致在使用firstChild和lastChild属性时，代码在不同环境下的表现可能不一致。

为了解决上述兼容性问题，DOM规范引入了以下新属性：

新增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>

方法一：利用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测试上述代码，可得如下运行结果：

方法二：使用firstElementChild和nextElementSibling

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

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。