节点：firstChild 属性

firstChild 是 Node 接口的只读属性，它返回树中节点的第一个子节点，如果节点没有子节点，则返回 null。

如果节点是 Document，则此属性返回其直接子节点列表中的第一个节点。

注意：此属性返回任何类型的节点，该节点是此节点的第一个子节点。它可能是 Text 或 Comment 节点。如果您想获取另一个元素的第一个子 Element，请考虑使用 Element.firstElementChild。

值

Node，如果没有则为 null。

示例

此示例演示了 firstChild 的用法以及空白节点如何可能干扰此属性的使用。

html
<p id="para-01">
  <span>First span</span>
</p>

<script>
  const p01 = document.getElementById("para-01");
  console.log(p01.firstChild.nodeName);
</script>

在上面，控制台 将显示 '#text'，因为插入了一个文本节点来维护 <p> 的结束和 <span> 标签之间的空白。任何 空白 将创建一个 #text 节点，从单个空格到多个空格、换行符、制表符等等。

在结束 </span> 和 </p> 标签之间也插入了另一个 #text 节点。

如果从源代码中删除此空白，则不会插入 #text 节点，并且 span 元素将成为段落的第一个子节点。

html
<p id="para-01"><span>First span</span></p>

<script>
  const p01 = document.getElementById("para-01");
  console.log(p01.firstChild.nodeName);
</script>

现在控制台将显示 'SPAN'。

为了避免 node.firstChild 返回 #text 或 #comment 节点的问题，可以使用 Element.firstElementChild 来仅返回第一个元素节点。

规范

规范
DOM 标准
# ref-for-dom-node-firstchild①

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅