In JavaScript volgt de DOM-structuur de hiërarchische structuur die een grote lijst met knooppunten bevat. De structuur begint bij het hoofdknooppunt (Document) en wordt vervolgens toegevoegd aan de bovenliggende en onderliggende knooppunten. Om toegang te krijgen tot deze onderliggende knooppunten, biedt JavaScript de ' kindNodes ' eigendom. Deze eigenschap helpt de gebruikers om toegang te krijgen tot alle of een specifiek onderliggend knooppunt van het bijbehorende bovenliggende element.
Dit bericht gaat dieper in op het doel en de werking van de eigenschap HTML DOM-element 'childNodes' in JavaScript.
Wat is de eigenschap 'childNodes' van het HTML DOM-element in JavaScript?
De ' kindNodes ” is een alleen-lezen eigenschap die de lijst retourneert van alle onderliggende knooppunten van een element in de vorm van een NodeList-object. Deze speciale eigenschap kan ook worden gebruikt om toegang te krijgen tot het specifieke onderliggende knooppunt van het bovenliggende element. Het onderliggende knooppunt begint vanaf de index '0 (nul)'. Bovendien worden de witruimten, opmerkingen en tekstknooppunten ook als onderliggende knooppunten beschouwd.
Syntaxis
element.childNodes
De hierboven gegeneraliseerde syntaxis retourneert het NodeList-object dat onderliggende knooppunten van het beoogde element bevat.
Laten we de hierboven gedefinieerde syntaxis praktisch gebruiken.
HTML code
Bekijk eerst de vermelde HTML-code:
< div ID kaart = 'Div' stijl = 'rand: 2px effen zwart; hoogte: 200px; breedte: 250px; opvulling: 10px' >< h2 > Eerste rubriek h2 >
< h3 > Tweede rubriek h3 >
< P > Eerste paragraaf P >
< P > Tweede paragraaf P >
div >
< P ID kaart = 'voor' > P >
In de bovenstaande coderegels:
- Voeg een ... toe ' ”-element met een id “Div”, opgemaakt met behulp van de vermelde eigenschappen (rand, hoogte en breedte).
- Definieer binnen het element '
' respectievelijk twee koppen en twee alinea's.- Als laatste de “ ” tag sluit een lege paragraaf in met een id “para”.
Opmerking: De vermelde HTML-code wordt in dit bericht beschouwd.
Voorbeeld 1: de eigenschap 'childNodes' toepassen om het totale aantal onderliggende knooppunten van een bepaald element te krijgen
Dit voorbeeld gebruikt de eigenschappen 'childNodes' en 'length' om het totale aantal onderliggende knooppunten in het specifieke bovenliggende element te krijgen.
JavaScript-code
Laten we de gegeven code volgen:
< script >
const elem = document.getElementById ( 'Div' ) ;
laten num = elem.childNodes.length;
document.getElementById ( 'voor' ) .innerHTML = 'Waarde: ' + aantal;
script >In de bovenstaande regels code:
- De variabele 'elem' gebruikt de ' getElementById() '-methode om toegang te krijgen tot het bovenliggende element waarvan de id 'Div' is.
- De variabele 'num' gebruikt de ' kindNodes ' En ' lengte ” eigenschappen om het aantal onderliggende knooppunten te krijgen dat aanwezig is in het geopende “” element.
- Ten slotte haalt de methode 'getElementById()' de ingesloten lege alinea op via zijn id 'para' om deze toe te voegen met de waarde van de variabele 'num'.
Uitgang
De output impliceert dat er een totaal “ 9 ” onderliggende knooppunten in het gegeven “
” element inclusief de witruimtes tussen elementen.Voorbeeld 2: de eigenschap 'childNodes' toepassen om de naam van een specifiek onderliggend knooppunt te verkrijgen
De eigenschap 'childNodes' kan ook worden gebruikt met de eigenschap 'nodeName' om de naam van de onderliggende knoop(pen) te krijgen. Laten we het praktisch bekijken.
JavaScript-code
Doorloop de volgende code:
< script >
const elem = document.getElementById ( 'Div' ) ;
laten num = elem.childNodes [ 1 ] .nodeNaam;
document.getElementById ( 'voor' ) .innerHTML = 'Element: ' +aantal;
script >Hier de ' kindNodes ” eigenschap is gekoppeld aan de “ knooppuntNaam ” eigenschap om de opgegeven naam van het onderliggende knooppunt te krijgen op basis van de geopende index, d.w.z. “1”.
Uitgang
De uitvoer geeft de naam van het onderliggende knooppunt weer, d.w.z. 'H2' -element tegen de opgegeven index.
Voorbeeld 3: de eigenschap 'childNodes' toepassen om de tekstkleur van een specifiek onderliggend knooppunt te wijzigen
Dit voorbeeld gebruikt de besproken eigenschap om de kleur van het doelgeïndexeerde kind te wijzigen.
JavaScript-code
Beschouw de volgende code:
< script >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .stijl.kleur = 'groente' ;
script >Hier de ' getElementById() ” methode haalt het bovenliggende “
” element op via zijn id “Div” en zijn onderliggende node geplaatst op de gespecificeerde index via de “ kindNodes eigendom, respectievelijk. Gebruik daarna de ' stijl.kleur ” eigenschap om de tekstkleur van het geopende onderliggende knooppunt te wijzigen.Uitgang
De uitvoer bevestigt dat de tekstkleur van het opgegeven onderliggende knooppunt correct is gewijzigd.
Conclusie
In JavaScript is de ' kindNodes ” eigenschap haalt het nodeList-object op dat de onderliggende knooppunten van het doel-HTML-element bevat. De onderliggende knooppunten zijn allemaal tegelijk toegankelijk of de gewenste door het indexnummer op te geven met de eigenschap 'childNodes'. Met deze eigenschap kan de JavaScript-functie worden uitgevoerd om speciale taken uit te voeren op de toegankelijke onderliggende knooppunten. Dit artikel gaat in op het toepassen van de eigenschap 'childNodes' in JavaScript.
- Definieer binnen het element '