使用for循环遍历元素集合，兼容性好且适合精确控制索引；2. 使用foreach遍历nodelist，代码简洁但ie不支持；3. 使用for...of遍历可迭代节点集合，语法清晰推荐现代浏览器使用；4. 遍历子节点时children仅包含元素节点更实用。根据浏览器支持和需求选择合适方法。
在JavaScript中，遍历DOM元素是操作网页结构的常见需求。可以通过多种方式实现，每种方法适用于不同的场景。以下是几种常用的遍历DOM元素的方法。
1. 使用 for 循环遍历元素集合
通过 document.getElementsByTagName、document.getElementsByClassName 或 document.querySelectorAll 获取元素集合后，可以用传统 for 循环进行遍历。
示例：
const divs = document.querySelectorAll('div');<br>
for (let i = 0; i < divs.length; i++) {<br>
console.log(divs[i]);<br>
}
这种方法兼容性好，适合需要精确控制索引的场景。
2. 使用 forEach 遍历 NodeList
querySelectorAll 返回的是一个 NodeList，现代浏览器支持直接使用 forEach 方法遍历。
示例：
const paragraphs = document.querySelectorAll('p');<br>
paragraphs.forEach((element) => {<br>
console.log(element);<br>
});
代码简洁，适合函数式编程风格，但注意 IE 不支持 NodeList 的 forEach。
3. 使用 for...of 遍历可迭代的节点集合
NodeList 和 HTMLCollection（部分情况下）是可迭代对象，可以使用 for...of 循环。
示例：
const lis = document.getElementsByTagName('li');<br>
for (const item of lis) {<br>
console.log(item);<br>
}
语法清晰，能自动处理迭代过程，推荐用于现代浏览器环境。
4. 遍历子节点：childNodes 与 children
如果想遍历某个元素的子节点，可以使用 childNodes（包含文本节点、注释等）或 children（仅元素节点）。
示例：
const parent = document.getElementById('container');<br>
for (const child of parent.children) {<br>
console.log(child);<br>
}
使用 children 可避免处理非元素节点，更符合大多数实际需求。
基本上就这些常用方法。根据目标浏览器和具体需求选择合适的方式即可。不复杂但容易忽略细节，比如NodeList和HTMLCollection的区别，以及是否包含非元素节点。
