例
得到的第一个子节点的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属性