「短文」关于 firstChild 属性的使用细节

firstChild 属性包含 DOM 节点的第一个子 DOM 节点，可以是文本、注释或元素类型。例如，下面的代码将第一个 li 元素中的文本从“Gas”更改为“Water”。

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

使用 firstChild 时，需要格外注意空格！下面的示例没有按预期工作，因为 firstChild 返回一个文本节点，其中包含 ul id=“example” 和第一个 li 之间有空格

<ul id="example">
  <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 id="firstElemChild">
  <li>Gas</li>
  <li>Food</li>
</ul>
<script>
  const elem = document.querySelector('#firstElemChild');
  elem.firstElementChild.innerHTML = 'Water';
</script>

如果 DOM 节点没有子节点，则 firstChild 返回 null。

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

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载