I JavaScript følger DOM-treet den hierarkiske strukturen som inneholder en stor liste med noder. Strukturen starter fra rotnoden (Dokument) og tilføyes deretter med overordnet og underordnet node. For å få tilgang til disse undernodene tilbyr JavaScript ' barnnoder ” eiendom. Denne egenskapen hjelper brukerne med å få tilgang til hele eller en spesifikk underordnet node til det tilknyttede overordnede elementet.
Dette innlegget utdyper formålet og arbeidet med HTML DOM-elementet 'childNodes'-egenskapen i JavaScript.
Hva er HTML DOM Element 'childNodes' egenskapen i JavaScript?
« barnnoder ” er en skrivebeskyttet egenskap som returnerer listen over alle undernodene til et element i form av et NodeList-objekt. Denne spesielle egenskapen kan også brukes for å få tilgang til den spesifikke underordnede noden til det overordnede elementet. Barnenoden starter fra '0 (null)'-indeksen. Dessuten anses mellomrom, kommentarer og tekstnoder også som underordnede noder.
Syntaks
element.childNoder
Den ovenfor generaliserte syntaksen returnerer NodeList-objektet som inneholder underordnede noder til målelementet.
La oss bruke de ovenfor definerte syntaksene praktisk talt.
HTML-kode
Ta først en titt på den angitte HTML-koden:
< div id = 'Div' stil = 'kant: 2px helt svart; høyde: 200px; bredde: 250px; polstring: 10px' >< h2 > Første overskrift h2 >
< h3 > Andre overskrift h3 >
< s > Første avsnitt s >
< s > Andre ledd s >
div >
< s id = 'til' > s >
I kodelinjene ovenfor:
- Legg til en ' ” element med en id “Div”, stylet ved hjelp av de angitte egenskapene (kant, høyde og bredde).
- Innenfor «
»-elementet definerer du henholdsvis to overskrifter og to avsnitt.- Til slutt, ' '-taggen bygger inn et tomt avsnitt med en id 'para'.
Merk: Den angitte HTML-koden vurderes gjennom hele dette innlegget.
Eksempel 1: Bruk av «childNodes»-egenskapen for å få det totale antallet undernoder for et bestemt element
Dette eksemplet bruker egenskapene 'childNodes' og 'length' for å få det totale antallet underordnede noder i det spesifikke overordnede elementet.
JavaScript-kode
La oss følge den gitte koden:
< manus >
const elem = document.getElementById ( 'Div' ) ;
la num = elem.childNodes.length;
document.getElementById ( 'til' ) .innerHTML = 'Verdi: ' + antall;
manus >I kodelinjene ovenfor:
- 'elem'-variabelen bruker ' getElementById() ”-metoden for å få tilgang til det overordnede elementet hvis ID er “Div”.
- 'num'-variabelen bruker ' barnnoder ' og ' lengde '-egenskaper for å få antall underordnede noder som er tilstede i det åpnede ''-elementet.
- Til slutt henter 'getElementById()'-metoden det innebygde tomme avsnittet via sin id 'para' for å legge det til 'num'-variabelverdien.
Produksjon
Utgangen innebærer at det er en total ' 9 ” underordnede noder i det gitte “
”-elementet inkludert mellomrom mellom elementene.Eksempel 2: Bruk av «childNodes»-egenskapen for å få navnet på en spesifikk underordnet node
'childNodes'-egenskapen kan også brukes med 'nodeName'-egenskapen for å få navnet på den underordnede noden(e). La oss se det praktisk talt.
JavaScript-kode
Gå gjennom følgende kode:
< manus >
const elem = document.getElementById ( 'Div' ) ;
la num = elem.childNoder [ 1 ] .nodenavn;
document.getElementById ( 'til' ) .innerHTML = 'Element: ' +antall;
manus >Her er ' barnnoder ' egenskapen er knyttet til ' nodenavn ”-egenskapen for å få det spesifiserte barnenodenavnet basert på tilgangsindeksen, dvs. “1”.
Produksjon
Utgangen viser barnenodens navn, dvs. 'H2'-elementet mot den spesifiserte indeksen.
Eksempel 3: Bruk av egenskapen 'childNodes' for å endre tekstfargen til en spesifikk undernode
Dette eksemplet bruker den omtalte egenskapen til å endre fargen på det målindekserte barnet.
JavaScript-kode
Tenk på følgende kode:
< manus >
document.getElementById ( 'Div' ) .childNoder [ 3 ] .style.color = 'grønn' ;
manus >Her er ' getElementById() '-metoden henter det overordnede '
'-elementet via ID-en 'Div' og dets underordnede node plassert på den spesifiserte indeksen via ' barnnoder ” eiendom, henholdsvis. Etter det bruker du ' stil.farge '-egenskapen for å endre tekstfargen til den underordnede noden.Produksjon
Utdata bekrefter at tekstfargen til den spesifiserte undernoden er endret på riktig måte.
Konklusjon
I JavaScript er ' barnnoder ”-egenskapen henter nodeList-objektet som inneholder undernodene til HTML-målelementet. Barnenodene kan nås på en gang eller den ønskede ved å spesifisere indeksnummeret med egenskapen 'childNodes'. Denne egenskapen tillater utførelse av JavaScript-funksjonen for å utføre spesielle oppgaver på de underordnede nodene. Denne artikkelen utdypet bruken av 'childNodes'-egenskapen i JavaScript.
- Innenfor «