U JavaScriptu, DOM stablo slijedi hijerarhijsku strukturu koja sadrži veliki popis čvorova. Struktura počinje od korijenskog čvora (Dokument), a zatim se dodaje s nadređenim i podređenim čvorovima. Kako bi se pristupilo tim podređenim čvorovima, JavaScript nudi ' dijeteČvorovi ” vlasništvo. Ovo svojstvo pomaže korisnicima da pristupe svim ili određenim podređenim čvorovima pridruženog nadređenog elementa.
Ovaj post razrađuje cilj i rad svojstva HTML DOM elementa “childNodes” u JavaScriptu.
Što je svojstvo “childNodes” HTML DOM elementa u JavaScriptu?
' dijeteČvorovi ” je svojstvo samo za čitanje koje vraća popis svih podređenih čvorova elementa u obliku objekta NodeList. Ovo posebno svojstvo također se može koristiti za pristup određenom podređenom čvoru nadređenog elementa. Podređeni čvor počinje od indeksa '0 (nula)'. Štoviše, razmaci, komentari i tekstualni čvorovi također se smatraju podređenim čvorovima.
Sintaksa
element.childNodes
Gore generalizirana sintaksa vraća objekt NodeList koji sadrži podređene čvorove ciljanog elementa.
Upotrijebimo gore definirane sintakse praktično.
HTML kôd
Prvo pogledajte navedeni HTML kod:
< div iskaznica = 'Div' stil = 'obrub: 2px puna crna; visina: 200px; širina: 250px; ispuna: 10px' >< h2 > Prvi naslov h2 >
< h3 > Drugi naslov h3 >
< str > Prvi paragraf str >
< str > Drugi paragraf str >
div >
< str iskaznica = 'za' > str >
U gornjim linijama koda:
- Dodati ' ” element s ID-om “Div”, stiliziran uz pomoć navedenih svojstava (obrub, visina i širina).
- Unutar elementa “
” definirajte dva naslova odnosno dva odlomka.- Na kraju, ' ” oznaka ugrađuje prazan odlomak s ID-om „para”.
Bilješka: Navedeni HTML kôd razmatra se u cijelom ovom postu.
Primjer 1: Primjena svojstva “childNodes” za dobivanje ukupnog broja podređenih čvorova određenog elementa
Ovaj primjer koristi svojstva 'childNodes' i 'length' za dobivanje ukupnog broja čvorova djece prisutnih u određenom nadređenom elementu.
JavaScript kod
Slijedimo navedeni kod:
< skripta >
const elem = document.getElementById ( 'Div' ) ;
neka num = elem.childNodes.length;
document.getElementById ( 'za' ) .unutarnjiHTML = 'Vrijednost: ' + broj;
skripta >U gornjim redcima koda:
- Varijabla 'elem' koristi ' getElementById() ” za pristup nadređenom elementu čiji je ID “Div”.
- Varijabla 'num' koristi ' dijeteČvorovi ' i ' duljina ” svojstva da biste dobili broj podređenih čvorova prisutnih u elementu kojem se pristupa “”.
- Na kraju, metoda 'getElementById()' dohvaća ugrađeni prazan odlomak preko njegovog ID-a 'para' kako bi mu se dodala vrijednost varijable 'num'.
Izlaz
Izlaz implicira da postoji ukupni ' 9 ” podređeni čvorovi u danom elementu “
” uključujući razmake između elemenata.Primjer 2: Primjena svojstva “childNodes” za dobivanje naziva određenog čvora djeteta
Svojstvo “childNodes” također se može koristiti sa svojstvom “nodeName” za dobivanje imena podređenih čvorova. Pogledajmo to praktično.
JavaScript kod
Prođite kroz sljedeći kod:
< skripta >
const elem = document.getElementById ( 'Div' ) ;
neka num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'za' ) .unutarnjiHTML = 'Element: ' +broj;
skripta >Ovdje, ' dijeteČvorovi ” imovina je povezana s „ naziv čvora ” za dobivanje navedenog imena podređenog čvora na temelju indeksa kojem se pristupa, tj. “1”.
Izlaz
Izlaz prikazuje naziv podređenog čvora, tj. element 'H2' u odnosu na navedeni indeks.
Primjer 3: Primjena svojstva “childNodes” za promjenu boje teksta određenog čvora djeteta
Ovaj primjer koristi razmatrano svojstvo za promjenu boje ciljanog indeksiranog djeteta.
JavaScript kod
Razmotrite sljedeći kôd:
< skripta >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'zeleno' ;
skripta >Ovdje, ' getElementById() ” metoda dohvaća roditeljski element “
” preko njegovog ID-a “Div” i njegov podređeni čvor postavljen na navedeni indeks putem “ dijeteČvorovi ”, respektivno. Nakon toga upotrijebite ' stil.boja ” za promjenu boje teksta podređenog čvora kojem se pristupa.Izlaz
Izlaz potvrđuje da je boja teksta navedenog podređenog čvora promijenjena na odgovarajući način.
Zaključak
U JavaScriptu, ' dijeteČvorovi ” svojstvo dohvaća objekt nodeList koji sadrži podređene čvorove ciljnog HTML elementa. Podređenim čvorovima se može pristupiti svim odjednom ili željenom navođenjem broja indeksa sa svojstvom “childNodes”. Ovo svojstvo omogućuje izvršavanje JavaScript funkcije za izvođenje posebnih zadataka na čvorovima djece kojima se pristupa. Ovaj članak razradio je primjenu svojstva “childNodes” u JavaScriptu.
- Unutar elementa “