HTML DOM firstChild 属性
实例
获取 <ul> 元素的第一个子节点的HTML内容:
var x = document.getElementById("myList").firstChild.innerHTML;
亲自试一试 »
页面下方有更多实例。
定义和用法
firstChild 属性将指定节点的第一个子节点作为节点对象返回。
此属性与 firstElementChild之间的区别在于， firstChild 将第一个子节点作为元素节点、文本节点或注释节点返回（取决于第一个节点），而 firstElementChild 将第一个子节点作为元素节点返回（忽略文本和注释节点）。
注释: 元素内部的空白被视为文本，文本被视为节点（请参阅"更多示例"）。
该属性是只读的。
提示: 使用 element.childNodes 属性返回指定节点的任何子节点。childNodes[0] 将生成与 firstChild 相同的结果。
提示: 要返回指定节点的最后一个子节点，请使用 the lastChild 属性。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| firstChild | Yes | Yes | Yes | Yes | Yes |
语法
node.firstChild
技术细节
| 返回值: | Node 节点对象，表示节点的第一个子节点，如果没有子节点，则为 null |
|---|---|
| DOM 版本 | Core Level 1 Node Object |
更多实例
实例
在本例中，我们将演示空白如何干扰此属性。
获取 <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>
亲自试一试 »
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>
实例
但是，如果我们从源代码中删除空白，则 <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>
亲自试一试 »
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
相关页面
HTML DOM 参考手册: node.lastChild 属性
HTML DOM 参考手册: node.childNodes 属性
HTML DOM 参考手册: node.parentNode 属性
HTML DOM 参考手册: node.nextSibling 属性
HTML DOM 参考手册: node.previousSibling 属性
HTML DOM 参考手册: node.nodeName 属性
