javascript - 为什么在这种情况下我不能访问 `element.firstChild`？

Question

function setText() {
  // doesn't change... why not!?
  document.getElementById("demo").firstChild.innerHTML = 'changed!';
}

//calling the function with setTimeout to make sure the HTML is loaded
setTimeout(setText, 500);

<div id="demo">
  <p>first</p>
  <p>second</p>
</div>

我好像改不了<p>first</p>至 <p>changed!</p> .为什么不呢？

Answer 1

元素内部的空白被认为是文本，文本被认为是节点。

如果将 HTML 更改为:

<div id="demo"><p>first</p><p>second</p></div>

它有效。试试吧。

或者您可以使用 node.firstElementChild 忽略前导文本，或使用 jQuery 等库来处理此问题。