Atrybut childNodes elementu HTML DOM

Definicja i użycie

childNodes Atrybut zwraca zbiór elementów potomnych (listę).

childNodes Zwraca obiekt NodeList.

childNodes Atrybut jest jedynie odczytywalny.

childNodes[0] Takie samo jak firstChild.

Wskazówka

childNodes Zwraca węzeł: węzeł elementowy, węzeł tekstowy i węzeł komentarza.

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

Alternatywa:

Atrybut children - children Atrybut zwraca elementy potomne (pomijając tekst i komentarze).

Proszę zobacz:

Atrybut firstChild

Atrybut lastChild

Atrybut nextSibling

Atrybut previousSibling

Metoda hasChildNodes()

Atrybut węzła

Atrybut parentNode

Atrybut nodeName

Atrybut nodeType

Atrybut nodeValue

Węzły HTML i elementy

W HTML DOM(Model Dokumentu HTML) Dokument HTML to zbiór węzłów (lub brak węzłów) posiadających (lub nie posiadających) podwęzły.

WęzełTo oznacza węzły elementowe, węzły tekstowe i węzły komentarza.

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

a element to tylko węzeł elementowy.

Podwęzły z podwęzlami

childNodes ZwracaPodwęzły(węzły elementowe, węzły tekstowe i węzły komentarza).

children ZwracaPodwęzły(nie tekst i węzły komentarza).

Bliscy z elementami bliższymi

BliscyTo "bracia" i "siostry".

BliscyTo węzły posiadające tego samego rodzica (w tym samym childNodes na liście).

Bliscy elementyTo elementy posiadające tego samego rodzica (w tym samym children na liście).

Przykład

Przykład 1

Uzyskaj podwęzły elementu <body>:

const nodeList = document.body.childNodes;

Spróbuj sam

Przykład 2

Uzyskaj liczbę podwęzłów w "myDIV":

let numb = document.getElementById("myDIV").childNodes.length;

Spróbuj sam

Przykład 3

Zmień kolor tła drugiego podwęzła:

element.childNodes[1].style.backgroundColor = "yellow";

Spróbuj sam

Przykład 4

Uzyskaj tekst trzeciego podwęzła elementu <select>:

let text = document.getElementById("mySelect").childNodes[2].text;

Spróbuj sam

Sintaksa

element.childNodes

Zwrócona wartość

Typ Opis
Obiekt

Zbiór obiektów NodeList węzłów.

Węzły są sortowane według kolejności ich występowania w dokumencie.

Obsługa przeglądarek

element.childNodes To cechy DOM Level 1 (1998).

Obsługiwane są wszystkie przeglądarki:

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