Sa JavaScript, ang DOM tree ay sumusunod sa hierarchical na istraktura na naglalaman ng isang malaking listahan ng mga node. Nagsisimula ang istraktura mula sa root node (Dokumento) at pagkatapos ay idinaragdag sa mga node ng magulang at anak. Upang ma-access ang mga child node na ito, inaalok ng JavaScript ang ' childNodes ” ari-arian. Tinutulungan ng property na ito ang mga user na ma-access ang lahat o isang partikular na child node ng nauugnay na elemento ng magulang.
Ang post na ito ay nagpapaliwanag sa layunin, at gumagana ng HTML DOM element na 'childNodes' na property sa JavaScript.
Ano ang HTML DOM Element 'childNodes' Property sa JavaScript?
Ang ' childNodes ” ay isang read-only na property na nagbabalik ng listahan ng lahat ng mga child node ng isang elemento sa anyo ng isang NodeList object. Magagamit din ang espesyal na property na ito para ma-access ang partikular na child node ng parent element. Nagsisimula ang child node sa index na “0 (zero)”. Bukod dito, ang mga whitespace, komento, at text node ay itinuturing din na child node.
Syntax
element.childNodes
Ang itaas-generalized na syntax ay nagbabalik ng NodeList object na naglalaman ng mga child node ng naka-target na elemento.
Gamitin natin ang mga natukoy na syntax sa itaas nang praktikal.
HTML Code
Una, tingnan ang nakasaad na HTML code:
< div id = 'Div' istilo = 'border: 2px solid black; taas: 200px; lapad: 250px; padding: 10px' >< h2 > Unang Heading h2 >
< h3 > Pangalawang Pamagat h3 >
< p > Unang talata p >
< p > Ikalawang Talata p >
div >
< p id = 'para sa' > p >
Sa mga linya ng code sa itaas:
- Magdagdag ng ' ” element na may id na “Div”, na naka-istilo sa tulong ng mga nakasaad (border, taas, at lapad) na mga katangian.
- Sa loob ng elementong '
', tukuyin ang dalawang heading at dalawang talata, ayon sa pagkakabanggit.- Panghuli, ang ' Ang tag na ” ay naglalagay ng walang laman na talata na may id na “para”.
Tandaan: Ang nakasaad na HTML code ay isinasaalang-alang sa buong post na ito.
Halimbawa 1: Paglalapat ng “childNodes” Property para Kunin ang Kabuuang Bilang ng mga Child Node ng Partikular na Element
Ginagamit ng halimbawang ito ang mga property na 'childNodes' at 'length' para makuha ang kabuuang bilang ng mga child node na nasa partikular na parent element.
JavaScript Code
Sundin natin ang ibinigay na code:
< script >
const elem = document.getElementById ( 'Div' ) ;
hayaan num = elem.childNodes.length;
document.getElementById ( 'para sa' ) .innerHTML = 'Halaga:' + bilang;
script >Sa itaas na mga linya ng code:
- Ang variable na 'elem' ay gumagamit ng ' getElementById() ” paraan para ma-access ang parent element na ang id ay “Div”.
- Ang variable na 'num' ay gumagamit ng ' childNodes 'at' haba ” properties para makuha ang bilang ng mga child node na nasa na-access na elementong “”.
- Panghuli, kinukuha ng pamamaraang 'getElementById()' ang naka-embed na walang laman na talata sa pamamagitan ng id nitong 'para' upang idugtong ito ng variable na value ng 'num'.
Output
Ang output ay nagpapahiwatig na mayroong kabuuang ' 9 ” child node sa ibinigay na “
” na elemento kasama ang mga whitespace sa pagitan ng mga elemento.Halimbawa 2: Paglalapat ng “childNodes” Property para Kunin ang Pangalan ng isang Partikular na Child Node
Ang property na “childNodes” ay maaari ding gamitin kasama ng property na “nodeName” para makuha ang (mga) pangalan ng child node. Tingnan natin ito nang praktikal.
JavaScript Code
Pumunta sa sumusunod na code:
< script >
const elem = document.getElementById ( 'Div' ) ;
hayaan num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'para sa' ) .innerHTML = 'Elemento: ' +num;
script >Dito, ang ' childNodes 'Ang ari-arian ay naka-link sa ' nodeName ” property para makuha ang tinukoy na child node name batay sa na-access na index ibig sabihin, '1'.
Output
Ang output ay nagpapakita ng pangalan ng child node ibig sabihin, 'H2' na elemento laban sa tinukoy na index.
Halimbawa 3: Paglalapat ng 'childNodes' Property para Baguhin ang Kulay ng Teksto ng isang Partikular na Child Node
Ginagamit ng halimbawang ito ang tinalakay na property para baguhin ang kulay ng target na na-index na bata.
JavaScript Code
Isaalang-alang ang sumusunod na code:
< script >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'berde' ;
script >Dito, ang ' getElementById() Kinukuha ng paraan ng ” ang parent na “
” na elemento sa pamamagitan ng id nitong “Div” at ang child node nito na inilagay sa tinukoy na index sa pamamagitan ng “ childNodes ” ari-arian, ayon sa pagkakabanggit. Pagkatapos nito, gamitin ang ' istilo.kulay ” property upang baguhin ang kulay ng text ng na-access na child node.Output
Kinukumpirma ng output na ang kulay ng teksto ng tinukoy na child node ay nabago nang naaangkop.
Konklusyon
Sa JavaScript, ang ' childNodes Kinukuha ng ” property ang nodeList object na naglalaman ng mga child node ng target na HTML element. Ang mga child node ay maaaring ma-access nang sabay-sabay o ang ninanais sa pamamagitan ng pagtukoy sa index number na may property na 'childNodes'. Ang property na ito ay nagbibigay-daan sa pagpapatupad ng JavaScript function na magsagawa ng mga espesyal na gawain sa mga na-access na child node. Ang artikulong ito ay nagpapaliwanag sa paglalapat ng 'childNodes' na property sa JavaScript.
- Sa loob ng elementong '