JavaScriptis järgib DOM-puu hierarhilist struktuuri, mis sisaldab suurt loendit sõlmedest. Struktuur algab juursõlmest (Dokumendist) ja lisatakse seejärel ülem- ja alamsõlmedesse. Nendele alamsõlmedele juurdepääsuks pakub JavaScript lapsNodes ” vara. See atribuut aitab kasutajatel pääseda juurde seotud emaelemendi kogu või konkreetsele alamsõlmele.
See postitus käsitleb JavaScripti HTML DOM-i elemendi „childNodes” eesmärki ja tööd.
Mis on JavaScripti HTML DOM-i elemendi 'childNodes' atribuut?
' lapsNodes ” on kirjutuskaitstud atribuut, mis tagastab elemendi kõigi alamsõlmede loendi NodeListi objekti kujul. Seda erilist omadust saab kasutada ka põhielemendi konkreetsele alamsõlmele juurdepääsuks. Alamsõlm algab indeksist '0 (null)'. Lisaks loetakse alamsõlmedeks ka tühikud, kommentaarid ja tekstisõlmed.
Süntaks
element.childNodes
Ülaltoodud üldistatud süntaks tagastab objekti NodeList, mis sisaldab sihtelemendi alamsõlmi.
Kasutame ülaltoodud süntakse praktiliselt.
HTML-kood
Kõigepealt vaadake märgitud HTML-koodi:
< div id = 'Div' stiilis = 'ääris: 2px täismust; kõrgus: 200px; laius: 250px; polsterdus: 10px' >< h2 > Esimene pealkiri h2 >
< h3 > Teine pealkiri h3 >
< lk > Esimene lõik lk >
< lk > Teine lõik lk >
div >
< lk id = 'eest' > lk >
Ülaltoodud koodiridades:
- Lisa ' ” element ID-ga „Div”, mis on kujundatud määratud (ääris, kõrgus ja laius) omaduste abil.
- Määrake elemendis „
” vastavalt kaks pealkirja ja kaks lõiku.- Lõpuks, ' ” silt manustab tühja lõigu ID-ga „para”.
Märge: Nimetatud HTML-koodi käsitletakse kogu selles postituses.
Näide 1: atribuudi „childNodes” rakendamine konkreetse elemendi alamsõlmede koguarvu saamiseks
See näide kasutab atribuute „childNodes” ja „length”, et saada konkreetses emaelemendis olevate alamsõlmede koguarv.
JavaScripti kood
Järgime antud koodi:
< stsenaarium >
const elem = document.getElementById ( 'Div' ) ;
lase arv = elem.childNodes.length;
document.getElementById ( 'eest' ) .innerHTML = 'Väärtus:' + number;
stsenaarium >Ülaltoodud koodiridades:
- Muutuja 'elem' kasutab ' getElementById() ” meetod, et pääseda juurde emaelemendile, mille ID on „Div”.
- Muutuja 'num' kasutab ' lapsNodes ” ja „ pikkus ” atribuudid, et saada ligipääsetavas elemendis „” olevate alamsõlmede arv.
- Lõpuks tõmbab meetod 'getElementById()' manustatud tühja lõigu selle ID 'para' kaudu, et lisada sellele muutuja väärtus 'num'.
Väljund
Väljund tähendab, et on kokku 9 ” alamsõlmed antud “
” elemendis, sealhulgas tühikud elementide vahel.Näide 2: atribuudi „childNodes” rakendamine konkreetse alamsõlme nime saamiseks
Atribuuti „childNodes” saab kasutada ka atribuudiga „nodeName”, et saada alamsõlme(de) nimi. Vaatame seda praktiliselt.
JavaScripti kood
Minge läbi järgmise koodi:
< stsenaarium >
const elem = document.getElementById ( 'Div' ) ;
lase arv = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'eest' ) .innerHTML = 'Element:' +arv;
stsenaarium >Siin on ' lapsNodes ' vara on seotud ' nodeName ” atribuut, et saada määratud alamsõlme nimi juurdepääsuindeksi alusel, st „1”.
Väljund
Väljund kuvab alamsõlme nime, st elementi 'H2' määratud indeksi taustal.
Näide 3: atribuudi „childNodes” rakendamine konkreetse alamsõlme tekstivärvi muutmiseks
See näide kasutab käsitletud atribuuti sihtmärgiks oleva indekseeritud lapse värvi muutmiseks.
JavaScripti kood
Mõelge järgmisele koodile:
< stsenaarium >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'roheline' ;
stsenaarium >Siin on ' getElementById() Meetod tõmbab põhielemendi '
' selle ID 'Div' kaudu ja selle alamsõlme, mis asetatakse määratud indeksi juurde '' kaudu lapsNodes ” vara vastavalt. Pärast seda kasutage ' stiil.värv ” atribuut, et muuta juurdepääsetava alamsõlme teksti värvi.Väljund
Väljund kinnitab, et määratud alamsõlme tekstivärvi on asjakohaselt muudetud.
Järeldus
JavaScriptis on ' lapsNodes ” atribuut hangib objekti nodeList, mis sisaldab sihtmärk-HTML-elemendi alamsõlmi. Alamsõlmedele pääseb juurde korraga või soovitud ühele, määrates indeksi numbri atribuudiga “childNodes”. See atribuut võimaldab JavaScripti funktsiooni käivitamisel eritoiminguid juurde pääsetud alamsõlmedel. Selles artiklis käsitletakse atribuudi „childNodes” rakendamist JavaScriptis.
- Määrake elemendis „