JavaScript 对象

JavaScript 参考手册

JS DOM参考手册

HTML DOM firstChild 属性

HTML DOM Element 对象

firstChild只读属性返回指定节点的第一个子节点，作为一个Node对象。

如果指定的节点没有子节点，则此方法将返回空值。

元素内部的空白被视为文本，而文本被视为节点。注释也被视为节点。

为了避免firstChild返回#text或#comment节点的问题，可以使用firstElementChild仅返回第一个元素节点。

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

语法：

node.firstChild
<div>
   <p>这是DIV里面的第1个P</p>
   <p>这是DIV里面的第2个P</p>
   <p>这是DIV里面的第3个P</p>
</div>

<script>
var x = document.querySelector("div").firstChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>
测试看看‹/›

但是，如果我们删除DIV和第一个P元素之间的空格，则返回值将是P标签而不是#text：

<div><p>这是DIV里面的第1个P</p>
   <p>这是DIV里面的第2个P</p>
   <p>这是DIV里面的第3个P</p>
</div>

<script>
var x = document.querySelector("div").firstChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>
测试看看‹/›

浏览器兼容性

所有浏览器完全支持firstChild属性：

属性
firstChild是是是是是

技术细节

返回值：一个Node对象，表示节点的第一个子节点；如果没有子节点，则为null
DOM版本：DOM级别1

相关参考

HTML DOM参考：node .lastChild属性

HTML DOM参考：node .childNodes属性

HTML DOM参考：node .parentNode属性

HTML DOM参考：node .nextSibling属性

HTML DOM参考：node .previousSibling属性

HTML DOM参考：node .nodeName属性

HTML DOM Element 对象

JavaScript History 对象HTML DOM Element 对象