element.firstChild

Podsumowanie

firstChild zwraca węzeł pierwszego potomnego drzewa bieżącego węzła.

Składnia i wartości

var elt = element.firstChild;

elt to referencja do pierwszego dziecka elementu, jeśli jest takie - w przeciwnym razie jest to null.

Przykład

Przeglądarki oparte o Gecko wstawiają do dokumentu węzły tekstowe reprezentujące białe znaki w kodzie. Dlatego pierwsze dziecko elementu może odnosić się do wstawionego węzła tekstowego, a nie elementu określonego przez następny znacznik w źródle strony.

<p id="para-01">
  <span>Pierwszy span</span>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>

W powyższym przykładzie alert wyświetli '#text', ponieważ wstawiony jest węzeł tekstowy oznaczający przerwę między otwierającymi znacznikami <p> i <span> . Dowolny biały znak spowoduje wstawienie węzła tekstowego - zarówno pojedyncza spacja, jak i dowolna ilość spacji, nowych linii, znaków tabulacji itd.

Kolejny węzeł #text jest wstawiany między zamykającymi znacznikami </span> i </p>

Jeśli usunie się białe znaki ze źródła, nie zostaną wstawione węzły tekstowe, a element span stanie się pierwszym dzieckiem paragrafu.

<p id="para-01"><span>Pierwszy span</span></p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>

Teraz alert wyświetli 'SPAN'.

Uwagi

Więcej o problemach z węzłami-zjawami znajdziesz w błąd 26179 (nie komentuj tego błędu!). Oto jeden ze sposobów na ominięcie problemu:

<!-- konwencjonalne formatowanie prowadzi do
     zaśmiecenia drzewa dokumentu w Gecko
 -->
<div>
 <ul>
  <li>Pozycja 1</li>
  <li>Pozycja 2</li>
  <li>Pozycja 3</li>
 </ul>
</div>

<!-- Formatowanie ustawione, by ominąć
     problem węzłów-zjaw
 -->
<div
 ><ul
  ><li>Pozycja 1</li
  ><li>Pozycja 2</li
  ><li>Pozycja 3</li
 ></ul
></div>

Węzły bezdzietne

Własność zwraca null, jeśli bieżący węzeł jest bezdzietny.

Białe znaki i węzły dzieci

Węzły #text mogą być wstawione jako dzieci elementów takich jak TR pomimo że specyfikacja HTML pozwala tylko na TD jako ich dzieci. Z uwagi na XML białe znaki muszą zostać zachowane i gdzieś wstawione.

Ponieważ węzły #text nie są elementami HTML, białe znaki są tam wstawiane.

W3C DOM 3 FAQ: Why are some Text nodes empty?

Specyfikacja

DOM Level 1 Core: firstChild

DOM Level 2 Core: firstChild

 

Autorzy i etykiety dokumentu

 Autorzy tej strony: teoli, khalid32, Mgjbot, Ptak82, Jan Dudek
 Ostatnia aktualizacja: khalid32,