如何从节点获取元素

Question

据我了解，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 对象，但我不知道该怎么做。

Answer 1

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

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

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

Answer 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);
}