Node: firstChild 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

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

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

值

一个 Node，如果没有则为 null。

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

html

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

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

在上面，控制台将显示“#text”，因为插入了一个文本节点以保持起始 <p> 和 <span> 标签之间的空白。任何空白字符都会创建一个 #text 节点，从单个空格到多个空格、换行符、制表符等。

另一个 #text 节点被插入到闭合的 </span> 和 </p> 标签之间。

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

html

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

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

现在控制台将显示“SPAN”。

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

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

此页面最后由 MDN 贡献者于 ⁨2025年8月14日⁩ 修改。