HTML DOM Element firstChild 屬性

定義和用法

firstChild 屬性返回指定節點的首個子節點，以 Node 對象。

firstChild 屬性是只讀的。

firstChild 屬性與 childNodes[0] 相同。

注意

firstChild 返回第一個子節點：元素節點、文本節點或注釋節點。

元素之間的空白也是文本節點。

替代方案：

firstElementChild 屬性 - firstElementChild 屬性返回第一個子元素（忽略文本和注釋節點）。

另請參閱：

childNodes 屬性

lastChild 屬性

nextSibling 屬性

previousSibling 屬性

節點屬性

parentNode 屬性

nodeName 屬性

nodeType 屬性

nodeValue 屬性

實例

例子 1

返回 <ul> 元素的第一個子節點的 HTML 內容：

document.getElementById("myList").firstChild.innerHTML;

親自試一試

例子 2

獲取 <select> 元素的第一個子節點的文本：

let text = document.getElementById("mySelect").firstChild.text;

親自試一試

例子 3

此例演示空格的干擾。

嘗試獲取 "myDIV" 的第一個子節點的節點名：

<div id="myDIV">
  <p>Looks like first child</p>
  <p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

親自試一試

例子 4

但是，如果您從源中刪除空格，則 "myDIV" 中沒有 #text 節點：

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

親自試一試

HTML 節點與元素

在 HTML DOM（文檔對象模型）中，HTML 文檔是擁有（或沒有）子節點的節點集合。

節點是元素節點、文本節點和注釋節點。

元素之間的空白也是文本節點。

元素只是元素節點。

子節點與子元素

childNodes 返回子節點（元素節點、文本節點和注釋節點）。

children 返回子元素（而非文本和注釋節點）。

firstChild 與 firstElementChild

firstChild 返回第一個子節點（元素節點、文本節點或注釋節點）。元素之間的空白也是文本節點。

firstElementChild 返回第一個子元素（不返回文本節點和注釋節點）。

lastChild 與 lastElementChild

lastChild 返回最后一個子節點（元素節點、文本節點或注釋節點）。元素之間的空白也是文本節點。

lastElementChild 返回最后一個子元素（不返回文本節點和注釋節點）。

語法

element.firstChild

或

node.firstChild

返回值

類型 描述
節點

節點的第一個子節點。

如果無子，則返回 null。

瀏覽器支持

element.firstChild 是 DOM Level 1 (1998) 特性。

所有瀏覽器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持