HTML DOM 元素 firstChild
示例
返回 <ul> 元素第一个子节点的 HTML 内容
document.getElementById("myList").firstChild.innerHTML;
试一试 »
获取 <select> 元素第一个子节点的文本
let text = document.getElementById("mySelect").firstChild.text;
试一试 »
更多示例如下。
描述
The firstChild 属性返回节点的第一个子节点。
The firstChild 属性返回一个节点对象。
The firstChild 属性是只读的。
The firstChild 属性与 childNodes[0] 相同。
重要！
firstChild 返回第一个子 **节点**：元素节点、文本节点或注释节点。
元素之间的空格也是文本节点。
替代方案
The firstElementChild 属性返回第一个子 **元素**（忽略文本和注释节点）。
另请参见
节点属性
节点与元素
在 HTML DOM 术语中
**节点** 是所有节点（元素节点、文本节点和注释节点）。
元素之间的空格也是文本节点。
**元素** 仅是元素节点。
childNodes 与 children
**childNodes** 返回子 **节点**（元素节点、文本节点和注释节点）。
**children** 返回子 **元素**（不是文本和注释节点）。
firstChild 与 firstElementChild
**firstChild** 返回第一个子 **节点**（元素节点、文本节点或注释节点）。元素之间的空格也是文本节点。
**firstElementChild** 返回第一个子 **元素**（不是文本和注释节点）。
lastChild 与 lastElementChild
**lastChild** 返回最后一个子 **节点**（元素节点、文本节点或注释节点）。元素之间的空格也是文本节点。
**lastElementChild** 返回最后一个子 **元素**（不是文本和注释节点）。
语法
element.firstChild或
node.firstChild
返回值
| 类型 | 描述 |
| 节点 | 节点的第一个子节点。null 如果不存在子节点。 |
更多示例
此示例演示了空格如何干扰。
尝试获取 "myDIV" 的第一个子节点的节点名称
<div id="myDIV">
<p>看起来像是第一个子节点</p>
<p>看起来像是最后一个子节点</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>
试一试 »
但是，如果从源代码中删除空格，则 "myDIV" 中没有 #text 节点
<div id="myDIV"><p>第一个子节点</p><p>最后一个子节点</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>
试一试 »
浏览器支持
element.firstChild 是 DOM 级别 1 (1998) 功能。
它在所有浏览器中都得到完全支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
