Polecane kursy:

Atrybut firstChild elementu HTML DOM Element

firstChild Definicja i użycie

firstChild Atrybut zwraca pierwszego potomka określonego węzła, jako obiekt Node.

firstChild Atrybut jest jedynie do odczytu. childNodes[0] Podobne.

Uwaga

firstChild Zwraca pierwszy węzeł potomek: węzeł elementowy, węzeł tekstowy lub węzeł komentarzowy.

Białe przestrzenie między elementami są również węzłami tekstowymi.

Alternatywa:

Atrybut firstElementChild - firstElementChild Atrybut zwraca pierwszy potomek (pomijając węzły tekstowe i komentaryjne).

Zobacz również:

Atrybut childNodes

Atrybut lastChild

Atrybut nextSibling

Atrybut previousSibling

Atrybuty węzłów

Atrybut parentNode

Atrybut nodeName

Atrybut nodeType

Atrybut nodeValue

Przykład

Przykład 1

Zwróć HTML zawartość pierwszego potomka elementu <ul>:

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

Spróbuj sam

Przykład 2

Uzyskaj tekst pierwszego potomka elementu <select>:

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

Spróbuj sam

Przykład 3

Ten przykład pokazuje zniekształcenie przez spację.

Próbuj uzyskać nazwę węzła pierwszego potomka "myDIV":

<div id="myDIV">
  <p>Wygląda jak pierwsze dziecko</p>
  <p>Wygląda jak ostatni dziecko</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Spróbuj sam

Przykład 4

Ale jeśli usuniesz spację z kodu źródłowego, to w "myDIV" nie ma węzła #text:

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

Spróbuj sam

HTML node i element

W HTML DOMW modelu dokumentu (DOM), dokument HTML jest zbiorem węzłów (lub brakuje im potomków).

WęzełTo węzeł elementowy, węzeł tekstowy i węzeł komentarza.

ElementBiałe przestrzenie między elementami są również węzłami tekstowymi.

Element to węzeł elementowy.

Potomki i potomki elementowe

childNodes ZwracaPotomkiWęzły elementowe, węzły tekstowe i węzły komentarzy.

children ZwracaPotomki elementoweZwraca węzły elementowe (niezależnie od tego, czy są to węzły tekstowe, węzły komentarzy czy inne).

firstChild i firstElementChild

firstChild Zwraca pierwszegoPotomkiWęzły elementowe, węzły tekstowe lub węzły komentarzy. Białe przestrzenie między elementami są również węzłami tekstowymi.

firstElementChild Zwraca pierwszegoPotomki elementoweNie zwraca węzłów tekstowych ani węzłów komentarzy (niezależnie od tego, czy są one węzłami elementowymi, węzłami tekstowymi czy węzłami komentarzy).

lastChild i lastElementChild

lastChild Zwraca ostatniegoPotomkiWęzły elementowe, węzły tekstowe lub węzły komentarzy. Białe przestrzenie między elementami są również węzłami tekstowymi.

lastElementChild Zwraca ostatniegoPotomki elementoweNie zwraca węzłów tekstowych ani węzłów komentarzy (niezależnie od tego, czy są one węzłami elementowymi, węzłami tekstowymi czy węzłami komentarzy).

Gramatyka

element.firstChild

lub

node.firstChild

Zwracana wartość

Typ Opis
Węzeł

Pierwszy potomek węzła.

Jeśli brak potomka, zwraca null.

Wsparcie przeglądarek

element.firstChild To jest funkcja DOM Level 1 (1998).

Wszystkie przeglądarki wspierają to w pełni:

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