A JavaScript, l'arbre DOM segueix l'estructura jeràrquica que conté una gran llista de nodes. L'estructura comença des del node arrel (Document) i després s'afegeix als nodes pare i fill. Per accedir a aquests nodes fills, JavaScript ofereix el ' fillNodes ' propietat. Aquesta propietat ajuda els usuaris a accedir a tot o a un node fill específic de l'element pare associat.
Aquesta publicació explica l'objectiu i el funcionament de la propietat 'childNodes' de l'element DOM HTML a JavaScript.
Quina és la propietat 'childNodes' de l'element HTML DOM a JavaScript?
El ' fillNodes ” és una propietat de només lectura que retorna la llista de tots els nodes fills d'un element en forma d'objecte NodeList. Aquesta propietat especial també es pot utilitzar per accedir al node fill específic de l'element pare. El node fill comença des de l'índex '0 (zero)'. A més, els espais en blanc, els comentaris i els nodes de text també es consideren nodes fills.
Sintaxi
element.childNodes
La sintaxi generalitzada anteriorment retorna l'objecte NodeList que conté nodes fills de l'element objectiu.
Utilitzem pràcticament les sintaxis definides anteriorment.
Codi HTML
Primer, mireu el codi HTML indicat:
< div id = 'Div' estil = 'borde: 2px negre sòlid; alçada: 200px; amplada: 250px; farciment: 10px' >< h2 > Primer títol h2 >
< h3 > Segon títol h3 >
< pàg > Primer paràgraf pàg >
< pàg > Segon paràgraf pàg >
div >
< pàg id = 'per' > pàg >
A les línies de codi anteriors:
- Afegeix un ' ” element amb un identificador “Div”, dissenyat amb l'ajuda de les propietats indicades (vora, alçada i amplada).
- Dins de l'element '
', definiu dos encapçalaments i dos paràgrafs, respectivament.- Finalment, el ' L'etiqueta incrusta un paràgraf buit amb un identificador 'para'.
Nota: El codi HTML indicat es considera al llarg d'aquesta publicació.
Exemple 1: aplicació de la propietat 'childNodes' per obtenir el nombre total de nodes secundaris d'un element concret
Aquest exemple utilitza les propietats 'childNodes' i 'length' per obtenir el nombre total de nodes fills presents a l'element principal específic.
Codi JavaScript
Seguim el codi donat:
< guió >
const elem = document.getElementById ( 'Div' ) ;
deixar num = elem.childNodes.length;
document.getElementById ( 'per' ) .innerHTML = 'Valor:' + num;
guió >A les línies de codi anteriors:
- La variable 'elem' utilitza el ' getElementById() ” mètode per accedir a l'element pare l'identificador del qual és “Div”.
- La variable 'num' utilitza el ' fillNodes ' i ' llargada ” per obtenir el nombre de nodes fills presents a l'element “” al qual s'accedeix.
- Finalment, el mètode 'getElementById()' recupera el paràgraf buit incrustat mitjançant el seu identificador 'para' per afegir-lo amb el valor de la variable 'num'.
Sortida
La sortida implica que hi ha un total de ' 9 ” nodes fills a l'element “
” donat, inclosos els espais en blanc entre els elements.Exemple 2: aplicació de la propietat 'childNodes' per obtenir el nom d'un node secundari específic
La propietat 'childNodes' també es pot utilitzar amb la propietat 'nodeName' per obtenir el nom dels nodes secundaris. Vegem-ho pràcticament.
Codi JavaScript
Passeu pel següent codi:
< guió >
const elem = document.getElementById ( 'Div' ) ;
deixar num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'per' ) .innerHTML = 'Element:' +núm;
guió >Aquí, el ' fillNodes La propietat està vinculada amb la nodeName ” per obtenir el nom del node fill especificat en funció de l'índex accedit, és a dir, “1”.
Sortida
La sortida mostra el nom del node fill, és a dir, l'element 'H2' contra l'índex especificat.
Exemple 3: aplicació de la propietat 'childNodes' per canviar el color del text d'un node secundari específic
Aquest exemple utilitza la propietat comentada per canviar el color del fill indexat de destinació.
Codi JavaScript
Considereu el codi següent:
< guió >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .estil.color = 'verd' ;
guió >Aquí, el ' getElementById() ” obté l'element pare “
” mitjançant el seu id “Div” i el seu node fill situat a l'índex especificat mitjançant el “ fillNodes ” propietat, respectivament. Després d'això, utilitzeu el ' estil.color ” per canviar el color del text del node fill al qual s'ha accedit.Sortida
La sortida confirma que el color del text del node fill especificat s'ha canviat adequadament.
Conclusió
En JavaScript, el ' fillNodes ” La propietat recupera l'objecte nodeList que conté els nodes fills de l'element HTML objectiu. Es pot accedir als nodes fills tots alhora o al desitjat especificant el número d'índex amb la propietat 'childNodes'. Aquesta propietat permet l'execució de la funció JavaScript per realitzar tasques especials als nodes fills als quals s'accedeix. Aquest article s'ha detallat sobre l'aplicació de la propietat 'childNodes' a JavaScript.
- Dins de l'element '