如何从节点获取元素

Posted 2023-03-05

【中文标题】如何从节点获取元素

【英文标题】：How to get Element from Node

【发布时间】：2016-02-26 07:27:25

【问题描述】：

据我了解，document.querySelector 返回一个 Node 对象。然后我可以在这个对象上调用appendChild。

我执行以下代码将一堆 div 附加到我的容器 div 中：

var container = document.querySelector('.container');
for (var i = 0; i < 400; i++) 
  var block = document.createElement('div');
  block.className = 'block';
  container.appendChild(block);

最终得到以下结构：

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  ...
  <div class="block"></div>
</div>

如何循环遍历容器 div 中的每个元素并使用现有的 container 变量向其添加新类？

我试过这个：

...
container.childNodes[i].className = 'myClass';

看来我需要访问孩子Node 的Element 对象，但我不知道该怎么做。

【问题讨论】：

应该可以。 i 是什么？所有容器都是childnodes 元素吗？请改用children。

difference between node and element

querySelector返回的节点都是元素，因为不能为非元素节点写选择器。

为什么不在创建 DIV 的循环中添加类？

@cornflakes24：我不明白，这不是预期的日志吗？什么不起作用？ .children是Element subclass of Node的属性

【参考方案1】：

要将类添加到container 变量中的元素，我使用了以下代码：

container.children[i].className = 'myClass';

我不得不使用children 而不是childNodes。您可以在此处查看使用此代码的上下文：http://codepen.io/robkom/pen/RWmodz。

【参考方案2】：

你不能在创建 div 时添加它吗？

var container = document.querySelector('.container');
for (var i = 0; i < 400; i++) 
  var block = document.createElement('div');
  block.className = 'block myClass';
  container.appendChild(block);

【讨论】：

这是一个简单的解决方案——如果我能做到这一点，我会做到的（因此没有在 SO 上发布这个问题）。