V JavaScriptu drevo DOM sledi hierarhični strukturi, ki vsebuje velik seznam vozlišč. Struktura se začne s korenskim vozliščem (Dokument) in se nato doda z nadrejenim in podrejenim vozliščem. Za dostop do teh podrejenih vozlišč JavaScript ponuja » childNodes ” lastnina. Ta lastnost pomaga uporabnikom pri dostopu do celotnega ali določenega podrejenega vozlišča povezanega nadrejenega elementa.
Ta objava podrobneje opisuje cilj in delovanje lastnosti »childNodes« elementa HTML DOM v JavaScriptu.
Kaj je lastnost »childNodes« elementa HTML DOM v JavaScriptu?
' childNodes ” je lastnost samo za branje, ki vrne seznam vseh podrejenih vozlišč elementa v obliki objekta NodeList. To posebno lastnost je mogoče uporabiti tudi za dostop do določenega podrejenega vozlišča nadrejenega elementa. Podrejeno vozlišče se začne z indeksom '0 (nič)'. Poleg tega se presledki, komentarji in besedilna vozlišča prav tako štejejo za podrejena vozlišča.
Sintaksa
element.childNodes
Zgoraj posplošena sintaksa vrne objekt NodeList, ki vsebuje podrejena vozlišča ciljnega elementa.
Uporabimo zgoraj definirane sintakse praktično.
HTML koda
Najprej si oglejte navedeno kodo HTML:
< div id = 'Div' stil = 'obroba: 2px polna črna; višina: 200px; širina: 250px; oblazinjenje: 10px' >< h2 > Prvi naslov h2 >
< h3 > Drugi naslov h3 >
< str > Prvi odstavek str >
< str > Drugi odstavek str >
div >
< str id = 'za' > str >
V zgornjih vrsticah kode:
- Dodajte » ” element z ID-jem “Div”, stiliziran s pomočjo navedenih lastnosti (obroba, višina in širina).
- Znotraj elementa “
” definirajte dva naslova oziroma dva odstavka.- Nazadnje, ' ” vdela prazen odstavek z ID-jem “para”.
Opomba: Navedena koda HTML je upoštevana v tej objavi.
1. primer: uporaba lastnosti »childNodes« za pridobitev skupnega števila podrejenih vozlišč določenega elementa
Ta primer uporablja lastnosti »childNodes« in »length« za pridobitev skupnega števila podrejenih vozlišč, prisotnih v določenem nadrejenem elementu.
Koda JavaScript
Sledimo podani kodi:
< scenarij >
const elem = document.getElementById ( 'Div' ) ;
pustiti num = elem.childNodes.length;
document.getElementById ( 'za' ) .innerHTML = 'Vrednost:' + št.;
scenarij >V zgornjih vrsticah kode:
- Spremenljivka »elem« uporablja » getElementById() ” za dostop do nadrejenega elementa, katerega ID je “Div”.
- Spremenljivka »num« uporablja » childNodes « in » dolžina ”, da dobite število podrejenih vozlišč, ki so prisotna v dostopnem elementu “”.
- Nazadnje metoda »getElementById()« pridobi vdelan prazen odstavek prek njegovega id-ja »para«, da mu doda vrednost spremenljivke »num«.
Izhod
Rezultat implicira, da obstaja skupno ' 9 ” podrejena vozlišča v danem elementu “
”, vključno s presledki med elementi.2. primer: uporaba lastnosti »childNodes« za pridobitev imena določenega podrejenega vozlišča
Lastnost »childNodes« lahko uporabite tudi z lastnostjo »nodeName«, da dobite ime podrejenega vozlišča. Oglejmo si praktično.
Koda JavaScript
Pojdite skozi naslednjo kodo:
< scenarij >
const elem = document.getElementById ( 'Div' ) ;
pustiti num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'za' ) .innerHTML = 'Element: ' +število;
scenarij >Tukaj je ' childNodes ” nepremičnina je povezana z ” imevozlišča ” za pridobitev podanega imena podrejenega vozlišča na podlagi dostopnega indeksa, tj. “1”.
Izhod
Izhod prikaže ime podrejenega vozlišča, tj. element »H2« proti podanemu indeksu.
Primer 3: Uporaba lastnosti »childNodes« za spremembo barve besedila določenega podrejenega vozlišča
Ta primer uporablja obravnavano lastnost za spreminjanje barve ciljnega indeksiranega podrejenega elementa.
Koda JavaScript
Razmislite o naslednji kodi:
< scenarij >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'zelena' ;
scenarij >Tukaj je ' getElementById() ” metoda pridobi nadrejeni element “
” prek njegovega ID-ja “Div” in njegovo podrejeno vozlišče, postavljeno na podani indeks prek “ childNodes ” lastnine oz. Po tem uporabite » slog.barva ”, da spremenite barvo besedila dostopnega podrejenega vozlišča.Izhod
Izhod potrjuje, da je bila barva besedila navedenega podrejenega vozlišča ustrezno spremenjena.
Zaključek
V JavaScriptu je » childNodes ” lastnost pridobi objekt nodeList, ki vsebuje podrejena vozlišča ciljnega elementa HTML. Do podrejenih vozlišč je mogoče dostopati do vseh naenkrat ali do želenega, tako da navedete številko indeksa z lastnostjo “childNodes”. Ta lastnost omogoča izvajanje funkcije JavaScript za izvajanje posebnih nalog na dostopnih podrejenih vozliščih. Ta članek je podrobneje obravnaval uporabo lastnosti »childNodes« v JavaScriptu.
- Znotraj elementa “