HTML DOM firstChild 屬性

HTML DOM Element 對象

firstChild只讀屬性返回指定節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，作為一個(gè)Node對象。

如果指定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則此方法將返回空值。

元素內(nèi)部的空白被視為文本，而文本被視為節(jié)點(diǎn)。注釋也被視為節(jié)點(diǎn)。

為了避免firstChild返回#text或#comment節(jié)點(diǎn)的問題，可以使用firstElementChild僅返回第一個(gè)元素節(jié)點(diǎn)。

要返回指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，請使用lastChild屬性。

語法：

node.firstChild

<div>
   <p>這是DIV里面的第1個(gè)P</p>
   <p>這是DIV里面的第2個(gè)P</p>
   <p>這是DIV里面的第3個(gè)P</p>
</div>

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

但是，如果我們刪除DIV和第一個(gè)P元素之間的空格，則返回值將是P標(biāo)簽而不是#text：

<div><p>這是DIV里面的第1個(gè)P</p>
   <p>這是DIV里面的第2個(gè)P</p>
   <p>這是DIV里面的第3個(gè)P</p>
</div>

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

瀏覽器兼容性

所有瀏覽器完全支持firstChild屬性：

屬性
firstChild	是	是	是	是	是

技術(shù)細(xì)節(jié)

相關(guān)參考

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