HTML DOM firstChild Property
Przykład
Pobierz zawartość HTML pierwszego węzła podrzędnego elementu <ul>:
var x = document.getElementById("myList").firstChild.innerHTML;
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość firstChild zwraca pierwszy węzeł podrzędny określonego węzła jako obiekt węzła.
Różnica między tą właściwością a firstElementChild polega na tym, że firstElementChild zwraca pierwszy węzeł potomny jako węzeł elementu, węzeł tekstowy lub węzeł komentarza (w zależności od tego, który jest pierwszy), podczas gdy firstElementChild zwraca pierwszy węzeł potomny jako węzeł elementu (ignoruje tekst i komentarze).
Uwaga: Białe znaki wewnątrz elementów są uważane za tekst, a tekst za węzły (patrz „Więcej przykładów”).
Ta właściwość jest tylko do odczytu.
Wskazówka: Użyj właściwości elementu .childNodes , aby zwrócić dowolny węzeł podrzędny określonego węzła. childNodes[0] da taki sam wynik jak firstChild.
Wskazówka: aby zwrócić ostatni węzeł podrzędny określonego węzła, użyj właściwości lastChild .
Obsługa przeglądarki
Property | |||||
---|---|---|---|---|---|
firstChild | Yes | Yes | Yes | Yes | Yes |
Składnia
node.firstChild
Szczegóły techniczne
Wartość zwrotu: | Obiekt Node, reprezentujący pierwsze dziecko węzła lub null , jeśli nie ma węzłów podrzędnych |
---|---|
Wersja DOM | Obiekt węzła poziomu podstawowego |
Więcej przykładów
Przykład
W tym przykładzie pokazujemy, jak białe znaki mogą zakłócać tę właściwość.
Pobierz nazwę węzła pierwszego węzła podrzędnego elementu <div>:
<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Przykład
Jeśli jednak usuniemy białe znaki ze źródła, nie ma węzłów #text w <div>, co spowoduje, że element <p> będzie pierwszym węzłem potomnym:
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Przykład
Pobierz tekst pierwszego węzła podrzędnego elementu <select>:
var x = document.getElementById("mySelect").firstChild.text;
Powiązane strony
Odniesienie HTML DOM: węzeł. ostatnia własność dziecka
Odniesienie HTML DOM: węzeł. Właściwość childNodes
Odniesienie HTML DOM: węzeł. właściwość parentNode
Odniesienie HTML DOM: węzeł. następna nieruchomość rodzeństwa
Odniesienie HTML DOM: węzeł. poprzedni Nieruchomość rodzeństwa
Odniesienie HTML DOM: węzeł. Nazwa węzła Właściwość