HTML DOM 元素 firstChild
示例
返回 <ul> 元素的第一個子節點的 HTML 內容
document.getElementById("myList").firstChild.innerHTML;
自己動手試一試 »
獲取 <select> 元素的第一個子節點的文字
let text = document.getElementById("mySelect").firstChild.text;
自己動手試一試 »
更多示例見下文。
描述
firstChild 屬性返回節點的第一個子節點。
firstChild 屬性返回一個節點物件。
firstChild 屬性是隻讀的。
firstChild 屬性與 childNodes[0] 相同。
重要提示！
firstChild 返回第一個子節點：一個元素節點、一個文字節點或一個註釋節點。
元素之間的空白符也是文字節點。
替代方案
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 Level 1 (1998) 的一個特性。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
