JavaScript Element firstChild 属性

firstChild属性返回指定节点的第一个子节点，作为Node对象。此属性与firstElementChild之间的区别在于 firstChild将第一个子节点作为元素节点，文本节点或注释节点（取决于哪个是第一个）返回，而firstElementChild将第一个子节点作为元素节点返回（忽略文本）和注释节点）。此属性是只读的。

注意：元素内的空格被视为文本，文本被视为节点（请参阅“更多示例”）。

提示：使用element.childNodes属性可返回指定节点的任何子节点。childNodes[0]将产生与firstChild相同的结果。

提示：要返回指定节点的最后一个子节点，请使用lastChild属性。

实例：

获取<ul>元素的第一个子节点的HTML内容：

var x = document.getElementById("myList").firstChild.innerHTML;

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
属性
firstChild	支持	支持	支持	支持	支持

语法

node.firstChild

技术细节

项目	描述
返回值：	Node对象，表示节点的第一个子节点; 如果没有子节点，则为null
DOM版本	Core Level 1

更多例子

在这个例子中，我们演示了空格如何干扰这个属性。获取<div>元素的第一个子节点的节点名称：

<!-- 
元素内的空格被视为文本，文本被视为节点
在此示例中，在<p>之前有空格，在< span>之前 在< span>之后
因此，< div>的第一个子节点 是#text节点，而不是< p> 你期望的元素
-->

<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>元素的第一个子节点的节点名称：

<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>

尝试一下

获取<select>元素的第一个子节点的文本：

var x = document.getElementById("mySelect").firstChild.text;

尝试一下