17370845950

使用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');

    for (let i = 0; i < divs.length; i++) {

        console.log(divs[i]);

    }
  

这种方法兼容性好，适合需要精确控制索引的场景。

2. 使用 forEach 遍历 NodeList

querySelectorAll 返回的是一个 NodeList，现代浏览器支持直接使用 forEach 方法遍历。

    const paragraphs = document.querySelectorAll('p');

    paragraphs.forEach((element) => {

        console.log(element);

    });
  

代码简洁，适合函数式编程风格，但注意 IE 不支持 NodeList 的 forEach。

3. 使用 for...of 遍历可迭代的节点集合

NodeList 和 HTMLCollection（部分情况下）是可迭代对象，可以使用 for...of 循环。

    const lis = document.getElementsByTagName('li');

    for (const item of lis) {

        console.log(item);

    }
  

语法清晰，能自动处理迭代过程，推荐用于现代浏览器环境。

4. 遍历子节点：childNodes 与 children

如果想遍历某个元素的子节点，可以使用 childNodes（包含文本节点、注释等）或 children（仅元素节点）。

    const parent = document.getElementById('container');

    for (const child of parent.children) {

        console.log(child);

    }
  

使用 children 可避免处理非元素节点，更符合大多数实际需求。

基本上就这些常用方法。根据目标浏览器和具体需求选择合适的方式即可。不复杂但容易忽略细节，比如NodeList和HTMLCollection的区别，以及是否包含非元素节点。