如何循环遍历 HTML DOM 节点？答案

【问题标题】：How do I loop through HTML DOM nodes?如何循环遍历 HTML DOM 节点？
【发布时间】：2020-05-07 01:24:26
【问题描述】：

我想循环一个嵌套的HTML DOM节点，如下图：

<div id="main">
  <div class="nested-div-one">
    <div class="nested-div-two">
      <div class="nested-div-three">

      </div>
    </div>
  </div>
  <div class="nested-div-one">
    <div class="nested-div-two">
      <div class="nested-div-three">

      </div>
    </div>
  </div>
</div>

如何使用 Javascript 循环遍历每个分隔符？

【问题讨论】：

使用 document.querySelector("div") 获取所有 DIV 的列表，然后对其进行循环。
@Barmar 虽然是一个很好的解决方案，但 OP 并没有具体说明 div
了解这里的最终目标可能很有用。您是否只是想遍历这些节点中的每一个？或者您是否需要与最下方的子节点进行交互？根据用例，它可能会改变最佳输出。
如果您必须以嵌套顺序排列Node.childNodes，则可以循环测试Node.nodeType === 1。如果你想要它们，然后循环document.getElementsByTagName('*')。
@fingeron 他说“所有的分隔符”，我以为他的意思是 div。

标签： javascript html for-loop dom

【解决方案1】：

我猜 OP 并不特定于 DIV 元素，这里有一个更动态的方法：

所以首先你想得到第一个容器，在你的情况下是：

var mainEl = document.getElementById('main');

一旦你有了它，每个 DOM 元素都有一个带有所有子节点的 .children 属性。由于 DOM 是一个树对象，你也可以添加一个标志来实现递归行为。

function visitChildren(el, visitor, recursive) {
   for(var i = 0; i < el.children.length; i++) {
       visitor(children[i]);
       if(recursive)
           visitChildren(children[i], visitor, recursive);
   }
}

现在，假设您要将所有 div 背景更改为红色：

visitChildren(mainEl, function(el) { el.style.background = 'red' });

【讨论】：

【解决方案2】：

您可以为此使用香草 javascript

document.querySelectorAll('div').forEach(el => {
  // el = div element
  console.log(el);
});

【讨论】：