W języku JavaScript drzewo DOM ma strukturę hierarchiczną zawierającą dużą listę węzłów. Struktura zaczyna się od węzła głównego (Document), a następnie dołącza do węzłów nadrzędnych i podrzędnych. Aby uzyskać dostęp do tych węzłów potomnych, JavaScript oferuje „ węzły potomne ' nieruchomość. Ta właściwość pomaga użytkownikom uzyskać dostęp do wszystkich lub określonego węzła podrzędnego powiązanego elementu nadrzędnego.
Ten post omawia cel i działanie właściwości elementu HTML DOM „childNodes” w JavaScript.
Co to jest właściwość „childNodes” elementu HTML DOM w JavaScript?
„ węzły potomne ” to właściwość tylko do odczytu, która zwraca listę wszystkich węzłów potomnych elementu w postaci obiektu NodeList. Ta specjalna właściwość może być również wykorzystana do uzyskania dostępu do określonego węzła podrzędnego elementu nadrzędnego. Węzeł podrzędny zaczyna się od indeksu „0 (zero)”. Ponadto białe znaki, komentarze i węzły tekstowe są również uważane za węzły podrzędne.
Składnia
element.węzły potomne
Powyższa uogólniona składnia zwraca obiekt NodeList zawierający węzły potomne elementu docelowego.
Wykorzystajmy wyżej zdefiniowaną składnię praktycznie.
Kod HTML
Najpierw spójrz na podany kod HTML:
< dz ID = „Dziel” styl = „obramowanie: 2 piksele w kolorze czarnym; wysokość: 200 pikseli; szerokość: 250 pikseli; dopełnienie: 10 pikseli” >< h2 > Pierwszy nagłówek h2 >
< h3 > Drugi nagłówek h3 >
< P > Pierwszy paragraf P >
< P > Akapit drugi P >
dz >
< P ID = 'Do' > P >
W powyższych liniach kodu:
- Dodać '
” element o identyfikatorze „Div”, stylizowany za pomocą podanych właściwości (border, height, width). - W elemencie „” zdefiniuj odpowiednio dwa nagłówki i dwa akapity.
- Wreszcie „ ” osadza pusty akapit z identyfikatorem „para”.
Notatka: Podany kod HTML jest brany pod uwagę w całym tym poście.
Przykład 1: Zastosowanie właściwości „childNodes” w celu uzyskania całkowitej liczby węzłów potomnych określonego elementu
W tym przykładzie zastosowano właściwości „childNodes” i „length”, aby uzyskać całkowitą liczbę węzłów podrzędnych obecnych w określonym elemencie nadrzędnym.
Kod JavaScript
Postępujmy zgodnie z podanym kodem:
< scenariusz >
const element = document.getElementById ( „Dziel” ) ;
pozwalać liczba = element.węzły potomne.długość;
document.getElementById ( 'Do' ) .innerHTML = 'Wartość: ' + liczba;
scenariusz >W powyższych liniach kodu:
- Zmienna „elem” wykorzystuje „ getElementById() ”, aby uzyskać dostęp do elementu nadrzędnego, którego identyfikatorem jest „Div”.
- Zmienna „num” wykorzystuje „ węzły potomne ' I ' długość ”, aby uzyskać liczbę węzłów podrzędnych obecnych w elemencie „”, do którego uzyskano dostęp.
- Na koniec metoda „getElementById()” pobiera osadzony pusty akapit za pomocą jego identyfikatora „para”, aby dołączyć do niego wartość zmiennej „num”.
Wyjście
Dane wyjściowe oznaczają, że istnieje całkowita „ 9 ” węzły potomne w danym elemencie „
”, w tym odstępy między elementami.Przykład 2: Zastosowanie właściwości „childNodes” w celu uzyskania nazwy określonego węzła potomnego
Właściwość „childNodes” może być również wykorzystana z właściwością „nodeName” w celu uzyskania nazwy węzłów podrzędnych. Zobaczmy to praktycznie.
Kod JavaScript
Przejdź przez następujący kod:
< scenariusz >
const element = document.getElementById ( „Dziel” ) ;
pozwalać liczba = element.węzły potomne [ 1 ] .nazwa węzła;
document.getElementById ( 'Do' ) .innerHTML = 'Element: ' +liczba;
scenariusz >Tutaj ' węzły potomne ” właściwość jest powiązana z „ Nazwa węzła ”, aby uzyskać określoną nazwę węzła podrzędnego na podstawie indeksu, do którego uzyskano dostęp, tj. „1”.
Wyjście
Dane wyjściowe wyświetlają nazwę węzła podrzędnego, tj. element „H2” względem określonego indeksu.
Przykład 3: Zastosowanie właściwości „childNodes” w celu zmiany koloru tekstu określonego węzła potomnego
W tym przykładzie użyto omówionej właściwości, aby zmienić kolor docelowego indeksowanego elementu podrzędnego.
Kod JavaScript
Rozważ następujący kod:
< scenariusz >
document.getElementById ( „Dziel” ) .childNodes [ 3 ] .styl.kolor = 'zielony' ;
scenariusz >Tutaj ' getElementById() ” pobiera element nadrzędny „
” poprzez jego identyfikator „Div” i jego węzeł potomny umieszczony w określonym indeksie za pomocą „ węzły potomne ”, odpowiednio. Następnie użyj „ styl.kolor ”, aby zmienić kolor tekstu węzła podrzędnego, do którego uzyskano dostęp.Wyjście
Dane wyjściowe potwierdzają, że kolor tekstu określonego węzła podrzędnego został odpowiednio zmieniony.
Wniosek
W JavaScript „ węzły potomne ” pobiera obiekt nodeList zawierający węzły potomne docelowego elementu HTML. Dostęp do węzłów podrzędnych można uzyskać jednocześnie lub do żądanego węzła, określając numer indeksu za pomocą właściwości „childNodes”. Ta właściwość umożliwia wykonanie funkcji JavaScript w celu wykonania specjalnych zadań na węzłach podrzędnych, do których uzyskano dostęp. W tym artykule omówiono zastosowanie właściwości „childNodes” w JavaScript.