javascript - childNode 意外行为

Question

场景

我想获取 div 的所有子节点并更改其颜色。代码:

function myFunction() {
  var divv = document.getElementById("divv");
  var myCollection = divv.childNodes;
  var len = myCollection.length;
  var i;
  for (i = 0; i < len; i++) {
    myCollection[i].style.color = "red";
  }
}

<div id="divv">

  <h2>JavaScript HTML DOM</h2>

  <p>Hello World!</p>
  <p>Hello Norway!</p>
  <p>Click the button to change the color of all p elements.</p>

  <button onclick="myFunction()">Try it</button>
</div>

错误:这是行不通的。看来在我的集合中我拥有所有节点。 h2p 文本按钮。我预计只有 pH2 和按钮。

编辑说明注意:元素内的空格被视为文本，文本被视为节点。评论也被视为节点。

所以我们需要检查节点是否是元素节点，或者使用querySelectorAll。下面的答案中的示例。感谢您的帮助。

Answer 1

文本节点没有 style 属性。如果您想使用 childNodes，请首先检查 nodeType 是否为 1(Element 节点):

function myFunction() {
  var divv = document.getElementById("divv");
  var myCollection = divv.childNodes;
  var len = myCollection.length;
  var i;
  for (i = 0; i < len; i++) {
    if (myCollection[i].nodeType === 1) myCollection[i].style.color = "red";
  }
}

<div id="divv">
  <h2>JavaScript HTML DOM</h2>
  <p>Hello World!</p>
  <p>Hello Norway!</p>
  <p>Click the button to change the color of all p elements.</p>
  <button onclick="myFunction()">Try it</button>
</div>

但我更喜欢在这里使用 querySelectorAll 和 forEach:

function myFunction() {
  document.querySelectorAll('#divv > *')
    .forEach(child => child.style.color = "red");
}

<div id="divv">
  <h2>JavaScript HTML DOM</h2>
  <p>Hello World!</p>
  <p>Hello Norway!</p>
  <p>Click the button to change the color of all p elements.</p>
  <button onclick="myFunction()">Try it</button>
</div>

(或者，您可以简单地将#divv的style.color设置为红色)