Question

我正在进入入门级javascript课程并正在研究我们的文档对象模型部分，我试图理解下面的脚本没有价值的原因，有人可以解释一下吗？

<!DOCTYPE html>
<html>

<body id="bdy">

  <h1 id="id00">Test 1</h1>
  <h1 id="id01">Test2</h1>
  <p id="id02"></p>

  <script>
    document.getElementById("id02").innerHTML = document.getElementById("bdy").childNodes[0].nodeValue;
  </script>

</body>

</html>

Answer 1

因为子节点不是您认为的那样。您需要跳过空的文本节点，并且您可能想要访问节点的textContent

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM

在这里：nodeValue vs innerHTML and textContent. How to choose?

for (var i = 0; i < document.getElementById("bdy").childNodes.length; i++) {
  console.log(i, document.getElementById("bdy").childNodes[i].textContent)
}

<body id="bdy">

  <h1 id="id00">Test 1</h1>
  <h1 id="id01">Test2</h1>
  <p id="id02"></p>
</body>

这可能是你的意思：

document.getElementById("id02").innerHTML = document.getElementById("bdy").children[0].textContent;

<body id="bdy">

  <h1 id="id00">Test 1</h1>
  <h1 id="id01">Test2</h1>
  <p id="id02"></p>
</body>

没有显示值的原因（DOM）

1 个答案: