Atrybut lastChild w DOM Element HTML

Definicja i użycie

lastChild Atrybut zwraca ostatni podrzędny węzeł określonego węzła jako obiekt Node.

lastChild Atrybut jest jedynie odczytywalny.

Uwaga

lastChild Zwracane są te podrzędne węzły: wę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.

Alternatywa:

atrybut lastElementChild - lastElementChild Atrybut zwraca ostatni element podrzędny (pomijając węzły tekstowe i komentarze).

Inne zasoby:

atrybut childNodes

atrybut firstChild

atrybut nextSibling

atrybut previousSibling

atrybuty węzła

atrybut parentNode

atrybut nodeName

atrybut nodeType

atrybut nodeValue

węzły HTML i elementy

W HTML DOMw (Document Object Model) dokument HTML jest zbiorem węzłów, które mają (lub nie mają) podrzędne węzły.

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

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

a element to tylko węzeł elementowy.

Węzły podrzędne i elementy podrzędne

childNodes ZwracaPotomki（węzły elementowe, węzły tekstowe i węzły komentarzy）。

children ZwracaPotomki（zamiast węzłów tekstowych i komentarzy）。

firstChild oraz firstElementChild

firstChild Zwraca pierwszyPotomki（Węzeł elementowy, węzeł tekstowy lub węzeł komentarza). Białe przestrzenie między elementami są również węzłami tekstowymi.

firstElementChild Zwraca pierwszyPotomki（Nie zwraca węzłów tekstowych ani węzłów komentarzy).

lastChild i lastElementChild

lastChild Zwraca ostatniPotomki（Węzeł elementowy, węzeł tekstowy lub węzeł komentarza). Białe przestrzenie między elementami są również węzłami tekstowymi.

lastElementChild Zwraca ostatniPotomki（Nie zwraca węzłów tekstowych ani węzłów komentarzy).

Przykład

Przykład 1

Zwróć HTML ostatniego potomka elementu <ul>:

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

Spróbuj sam

Przykład 2

Uzyskaj tekst ostatniego potomka elementu <select>:

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

Spróbuj sam

Przykład 3

Ten przykład pokazuje, jak spacje mogą zakłócać, spróbuj uzyskać nazwę węzła ostatniego potomka "myDIV":

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

Spróbuj sam

Przykład 4

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

<div id="myDIV"><p>Pierwszy dziecko</p><p>Ostatni dziecko</p></div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

Spróbuj sam

Gramatyka

element.lastChild

lub

node.lastChild

Zwrócona wartość

Typ Opis
Węzeł Ostatni potomek węzła.
null Jeśli brak potomka.

Wspierane przeglądarki

element.lastChild To jest cecha 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