I JavaScript følger DOM-træet den hierarkiske struktur, der indeholder en stor liste af noder. Strukturen starter fra rodnoden (Dokument) og tilføjes derefter med overordnede og underordnede knudepunkter. For at få adgang til disse underordnede noder tilbyder JavaScript ' childNodes ” ejendom. Denne egenskab hjælper brugerne med at få adgang til hele eller en specifik underordnet node af det tilknyttede overordnede element.
Dette indlæg uddyber formålet og arbejdet med HTML DOM-elementet 'childNodes'-egenskaben i JavaScript.
Hvad er HTML DOM Element 'childNodes' egenskaben i JavaScript?
Det ' childNodes ” er en skrivebeskyttet egenskab, der returnerer listen over alle underordnede noder af et element i form af et NodeList-objekt. Denne særlige egenskab kan også bruges til at få adgang til den specifikke underordnede node for det overordnede element. Den underordnede node starter fra '0 (nul)'-indekset. Desuden betragtes hvide mellemrum, kommentarer og tekstnoder også som underordnede noder.
Syntaks
element.childNodes
Den ovennævnte generaliserede syntaks returnerer NodeList-objektet, der indeholder underordnede noder for det målrettede element.
Lad os bruge de ovenfor definerede syntakser praktisk talt.
HTML kode
Først skal du tage et kig på den angivne HTML-kode:
< div id = 'Div' stil = 'kant: 2px ensfarvet sort; højde: 200px; bredde: 250px; polstring: 10px' >< h2 > Første overskrift h2 >
< h3 > Anden overskrift h3 >
< s > Første afsnit s >
< s > Andet afsnit s >
div >
< s id = 'til' > s >
I ovenstående kodelinjer:
- Tilføj en ' ” element med et id “Div”, stylet ved hjælp af de angivne (kant, højde og bredde) egenskaber.
- Inden for '
'-elementet skal du definere henholdsvis to overskrifter og to afsnit.- Til sidst, ' ” tag indlejrer et tomt afsnit med et id “para”.
Bemærk: Den angivne HTML-kode tages i betragtning i hele dette indlæg.
Eksempel 1: Anvendelse af egenskaben 'childNodes' til at få det samlede antal underordnede noder for et bestemt element
Dette eksempel bruger egenskaberne 'childNodes' og 'length' til at få det samlede antal underordnede noder til stede i det specifikke overordnede element.
JavaScript kode
Lad os følge den givne kode:
< manuskript >
const elem = document.getElementById ( 'Div' ) ;
lade num = elem.childNodes.length;
document.getElementById ( 'til' ) .innerHTML = 'Værdi:' + antal;
manuskript >I ovenstående kodelinjer:
- Variablen 'elem' bruger ' getElementById() ” metode til at få adgang til det overordnede element, hvis id er “Div”.
- Variablen 'num' bruger ' childNodes ' og ' længde ” egenskaber for at få antallet af underordnede noder til stede i det tilgåede “”-element.
- Til sidst henter metoden 'getElementById()' det indlejrede tomme afsnit via dets id 'para' for at tilføje det med variabelværdien 'num'.
Produktion
Outputtet antyder, at der er en samlet ' 9 ” underordnede noder i det givne “
”-element inklusive mellemrummene mellem elementerne.Eksempel 2: Anvendelse af egenskaben 'childNodes' for at få navnet på en specifik underordnet node
Egenskaben 'childNodes' kan også bruges med egenskaben 'nodeName' for at få navnet på barnets node(r). Lad os se det praktisk talt.
JavaScript kode
Gå gennem følgende kode:
< manuskript >
const elem = document.getElementById ( 'Div' ) ;
lade num = elem.childNoder [ 1 ] .nodeName;
document.getElementById ( 'til' ) .innerHTML = 'Element: ' +antal;
manuskript >Her er ' childNodes ' ejendom er forbundet med ' nodenavn ' egenskab for at få det angivne underordnede nodenavn baseret på det tilgåede indeks, dvs. '1'.
Produktion
Outputtet viser den underordnede nodes navn, dvs. 'H2' element mod det angivne indeks.
Eksempel 3: Anvendelse af egenskaben 'childNodes' til at ændre tekstfarven på en specifik underordnet node
Dette eksempel bruger den omtalte egenskab til at ændre farven på det målindekserede barn.
JavaScript kode
Overvej følgende kode:
< manuskript >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'grøn' ;
manuskript >Her er ' getElementById() '-metoden henter det overordnede '
'-element via dets id 'Div' og dets underordnede node placeret ved det angivne indeks via ' childNodes ” ejendom, hhv. Brug derefter ' stil.farve ” egenskab for at ændre den tilgåede underknudes tekstfarve.Produktion
Outputtet bekræfter, at tekstfarven på den angivne underordnede node er blevet ændret korrekt.
Konklusion
I JavaScript er ' childNodes ” egenskaben henter nodeList-objektet, der indeholder de underordnede noder til HTML-målelementet. De underordnede noder kan tilgås på én gang eller den ønskede ved at angive indeksnummeret med egenskaben 'childNodes'. Denne egenskab tillader udførelse af JavaScript-funktionen til at udføre specielle opgaver på de underordnede noder. Denne artikel uddybede anvendelsen af egenskaben 'childNodes' i JavaScript.
- Inden for '