如何举例说明JavaScript中遍历DOM元素的常用方法？

本文共计824个文字，预计阅读时间需要4分钟。

JavaScript通过DOM操作元素的常见方式包括：

1. 获取元素： - 使用`document.getElementById()`或`document.querySelector()`根据ID或CSS选择器获取单个元素。 - 使用`document.getElementsByTagName()`或`document.getElementsByClassName()`根据标签名或类名获取多个元素。

2. 修改元素内容： - `element.textContent`获取或设置元素内部的文本内容。 - `element.innerText`获取或设置元素内部的HTML内容。 - `element.innerHTML`获取或设置元素内部的HTML结构。

3. 修改元素属性： - 直接修改元素的属性，如`element.setAttribute('class', 'newClass')`。 - 通过属性节点修改，如`element.getAttribute('class')`和`element.setAttribute('class', 'newClass')`。

4. 修改元素样式： - 使用`element.style`直接修改元素的CSS样式，如`element.style.color='red'`。 - 使用CSS类，如`element.className='newClass'`。

5. 动态创建元素： - 使用`document.createElement()`创建新元素。 - 使用`element.appendChild()`将新元素添加到现有元素中。

6. 删除元素： - 使用`element.remove()`或父元素的`removeChild()`方法删除元素。

7. 事件处理： - 使用`element.addEventListener()`或`element.attachEvent()`（IE8及以下）添加事件监听器。 - 使用`element.removeEventListener()`或`element.detachEvent()`（IE8及以下）移除事件监听器。

8. 其他操作： - 使用`element.offsetParent`获取元素的定位父元素。 - 使用`element.offsetTop`和`element.offsetLeft`获取元素的偏移位置。 - 使用`element.offsetWidth`和`element.offsetHeight`获取元素的宽度和高度。

这些方法帮助开发者有效地与DOM进行交互，从而构建动态的Web页面。

本文实例讲述了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代码运行工具：tools.jb51.net/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代码运行工具：tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：

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

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