JavaScript 中的 firstChild 属性

Question

firstChild 属性包含 DOM 节点的第一个子 DOM 节点，它可以是类型 text, comment 或者 element。例如，下面的代码更改了第一个中的文本 <li> 元素从 Gas 到 Water。

<ul><li>Gas</li><li>Food</li></ul>
<script>
  const list = document.querySelector('#example');
  list.firstChild.innerHTML = 'Water';
</script>

使用时空格很重要 firstChild，下面的例子没有 按 预期工作，因为 firstChild 返回一个包含空格的文本节点 <ul> 和第一个 <li>

<ul>
  <li>Gas</li>
  <li>Food</li>
</ul>
<script>
  const list = document.querySelector('#example');
  // `firstChild` below is a text node containing whitespace, **not** the first `<li>`
  list.firstChild.innerHTML = 'Water';
</script>

您可以使用 firstElementChild 属性来避免这个问题，并获取第一个 DOM 元素节点，忽略文本节点。

<ul>
  <li>Gas</li>
  <li>Food</li>
</ul>
<script>
  const elem = document.querySelector('#firstElemChild');
  elem.firstElementChild.innerHTML = 'Water';
</script>

如果 DOM 节点没有子节点， firstChild 包含 null。

<div></div>
<script>
  // Prints "null"
  console.log(document.querySelector('#example1').firstChild);
</script>