首页与我联系

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

By 前端达人
Published in 1-JavaScript
August 30, 2022
1 min read
「短文」关于 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>

前端达人公众号.jpg

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


Tags

javascriptbasicdom
Previous Article
「Docker基础」聊一聊 Docker CLI 命令
前端达人

前端达人

专注前端知识分享

相关文章

「短文」如何在 JavaScript 中随机数组
November 03, 2022
1 min

前端站点

VUE官网React官网TypeScript官网

公众号:前端达人

前端达人公众号