在这种情况下，为什么我不能访问 `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 这样的库来处理这个问题。

Answer 2

安慰document.getElementById("demo").firstChild我明白了 .

突出显示的部分显示空文本。这可能是原因，因为它不是第一个 p 元素。

您可以改为使用firstElementChild

function setText() {
  document.getElementById("demo").firstElementChild.innerHTML = 'changed!';
}
setTimeout(setText, 1000);

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

Answer 3

您始终可以使用children 方法或querySelector

function SetText(){
  document.getElementById('demo').children[0].textContent = "changed"
}

或者

function SetText() {
  document.querySelector('#demo > *').textContent = "changed"
}

Answer 4

使用“.firstChild”将选择 div 中的空白（如果有）。在你的情况下，有一些。你有两个选择，要么使用我们的空格/换行符，要么使用这个函数......

function setText() {
  // doesn't change because the firstChild isn't the <p> element...
  // try using firstElementChild
  document.getElementById("demo").firstElementChild.innerHTML = 'changed!';
}