HTML DOM Element firstChild 属性

定义和用法

firstChild 属性返回指定节点的首个子节点,以 Node 对象。

firstChild 属性是只读的。

firstChild 属性与 childNodes[0] 相同。

注意

firstChild 返回第一个子节点:元素节点、文本节点或注释节点。

元素之间的空白也是文本节点。

替代方案:

firstElementChild 属性 - firstElementChild 属性返回第一个子元素(忽略文本和注释节点)。

另请参阅:

childNodes 属性

lastChild 属性

nextSibling 属性

previousSibling 属性

节点属性

parentNode 属性

nodeName 属性

nodeType 属性

nodeValue 属性

实例

例子 1

返回 <ul> 元素的第一个子节点的 HTML 内容:

document.getElementById("myList").firstChild.innerHTML;

Coba Sendiri

例子 2

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

let text = document.getElementById("mySelect").firstChild.text;

Coba Sendiri

例子 3

此例演示空格的干扰。

尝试获取 "myDIV" 的第一个子节点的节点名:

<div id="myDIV">
  <p>Look like first child</p>
  <p>Look like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Coba Sendiri

Contoh 4

Tetapi, jika anda menghapus ruang kosong dari sumber, tidak ada node #text di "myDIV":

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Coba Sendiri

Node HTML dan elemen

Di HTML DOM(Dokumentasi Objek Model), dokumen HTML adalah kumpulan node yang memiliki (atau tidak memiliki) anak.

NodeAdalah node elemen, node teks dan node anotasi.

ElemenRuang antara mereka juga adalah node teks.

Elemen hanya node elemen.

Anak node dan anak elemen

childNodes KembalikanAnak node(Node elemen, node teks dan node anotasi).

children KembalikanAnak elemen(Bukan node teks dan node anotasi).

firstChild dan firstElementChild

firstChild Kembalikan pertamaAnak node(Node elemen, node teks atau node anotasi). Ruang antara elemen juga adalah node teks.

firstElementChild Kembalikan pertamaAnak elemen(Tidak mengembalikan node teks dan node anotasi).

lastChild dan lastElementChild

lastChild Kembalikan terakhirAnak node(Node elemen, node teks atau node anotasi). Ruang antara elemen juga adalah node teks.

lastElementChild Kembalikan terakhirAnak elemen(Tidak mengembalikan node teks dan node anotasi).

Sintaks

element.firstChild

atau

node.firstChild

Nilai pengembalian

Jenis Deskripsi
Node

Anak pertama node.

Jika tiada anak, kembalikan null.

Dukungan Pelayar

element.firstChild Adalah Fitur DOM Level 1 (1998).

Semua pelayar mendukung sepenuhnya:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan