例
得到的第一個子節點的HTML內容<ul>元素：
var x = document.getElementById("myList").firstChild.innerHTML;x的結果將是：
Coffee 試一試» 更多"Try it Yourself"下面的例子。
定義和用法
的則firstChild屬性返回指定節點的第一子節點，作為節點對象。
此屬性之間的區別firstElementChild是，則firstChild返回第一個子節點的元素節點，文本節點或註釋節點(depending on which one's first) ，而firstElementChild返回第一個子節點元素節點(ignores text and comment nodes) 。
注意：內部元件空白被認為是文本，並且文本被視為節點(See "More Examples")
此屬性為只讀。
提示：使用元素 .childNodes屬性返回指定節點的任何子節點。 的childNodes [0]將產生相同的結果則firstChild。
提示：要返回指定節點的最後一個子節點，使用lastChild屬性。
瀏覽器支持
| 屬性 | |||||
|---|---|---|---|---|---|
| firstChild | 是 | 是 | 是 | 是 | 是 |
句法
node .firstChild技術細節
| 返回值： | 一個節點對象，代表節點，或空的第一個子如果沒有子節點 |
|---|---|
| DOM版本 | 核心1級節點對象 |
更多示例
例
在這個例子中，我們展示的空白如何與這個屬性interfare。
得到的第一個子節點的節點名稱<div>元素：
<!--
Whitespace inside elements is considered as text, and text is
considered as nodes
In this example, there is whitespace before <p>,
before <span> and after <span>
Therefore, the first child
node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks
like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById( "myDIV" ).firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>x的結果將是：
#text 試一試» 例
然而，如果我們從源刪除該空格，有在<DIV>沒有#text節點，這將使得<p>元素的第一個子節點：
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById( "myDIV" ).firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>x的結果將是：
P 試一試» 例
得到的第一個孩子節點的文本<select>元素：
var x = document.getElementById("mySelect").firstChild.text;x的結果將是：
Audi 試一試» 相關頁面
HTML DOM參考： 節點。 lastChild屬性
HTML DOM參考： 節點。 的childNodes屬性
HTML DOM參考： 節點。 parentNode屬性
HTML DOM參考： 節點。 nextSibling屬性
HTML DOM參考： 節點。 previousSibling屬性
HTML DOM參考： 節點。 nodeName屬性