JavaScriptissä DOM-puu noudattaa hierarkkista rakennetta, joka sisältää suuren luettelon solmuista. Rakenne alkaa juurisolmusta (Document) ja liitetään sitten ylä- ja lapsisolmuihin. Näihin lapsisolmuihin pääsyä varten JavaScript tarjoaa ' lapsisolmut ” omaisuutta. Tämä ominaisuus auttaa käyttäjiä pääsemään kaikkiin tai tiettyyn liittyvän yläelementin alisolmuun.
Tämä viesti käsittelee JavaScriptin HTML DOM -elementin 'childNodes' -ominaisuuden tavoitetta ja toimintaa.
Mikä on JavaScriptin HTML DOM Element 'childNodes' -ominaisuus?
' lapsisolmut ” on vain luku -ominaisuus, joka palauttaa luettelon elementin kaikista lapsisolmuista NodeList-objektin muodossa. Tätä erikoisominaisuutta voidaan käyttää myös pääelementin tiettyyn lapsisolmuun pääsemiseen. Lapsisolmu alkaa indeksistä '0 (nolla)'. Lisäksi välilyöntejä, kommentteja ja tekstisolmuja pidetään myös lapsisolmuina.
Syntaksi
element.childSolmut
Yllä oleva yleistetty syntaksi palauttaa NodeList-objektin, joka sisältää kohdeelementin lapsisolmut.
Käytetään yllä määriteltyjä syntakseja käytännössä.
HTML-koodi
Katso ensin ilmoitettu HTML-koodi:
< div id = 'Div' tyyli = 'reuna: 2px kiinteä musta; korkeus: 200px; leveys: 250px; täyte: 10px' >< h2 > Ensimmäinen otsikko h2 >
< h3 > Toinen otsikko h3 >
< s > Ensimmäinen kappale s >
< s > Toinen kappale s >
div >
< s id = 'for' > s >
Yllä olevilla koodiriveillä:
- Lisää ' ” elementti, jonka tunnus on ”Div”, joka on muotoiltu ilmoitettujen (reuna, korkeus ja leveys) ominaisuuksien avulla.
- Määritä '
'-elementissä kaksi otsikkoa ja kaksi kappaletta.- Lopuksi ' ' -tunniste upottaa tyhjän kappaleen tunnuksella 'para'.
Huomautus: Ilmoitettu HTML-koodi otetaan huomioon koko tässä viestissä.
Esimerkki 1: 'childNodes'-ominaisuuden käyttäminen tietyn elementin lapsisolmujen kokonaismäärän saamiseksi
Tässä esimerkissä käytetään 'childNodes'- ja 'length'-ominaisuuksia saadakseen tietyssä yläelementissä olevien lapsisolmujen kokonaismäärän.
JavaScript-koodi
Noudatetaan annettua koodia:
< käsikirjoitus >
const elem = document.getElementById ( 'Div' ) ;
antaa num = elem.childSolmut.pituus;
document.getElementById ( 'for' ) .innerHTML = 'Arvo:' + numero;
käsikirjoitus >Yllä olevilla koodiriveillä:
- 'elem'-muuttuja käyttää ' getElementById() ' -menetelmä päästäksesi pääelementtiin, jonka tunnus on 'Div'.
- 'Num'-muuttuja käyttää ' lapsisolmut ' ja ' pituus ' -ominaisuuksia saadaksesi käsitellyssä ''-elementissä olevien lapsisolmujen lukumäärän.
- Lopuksi menetelmä getElementById() hakee upotetun tyhjän kappaleen id:n 'para' kautta ja lisää siihen muuttujan 'num' arvo.
Lähtö
Tulos tarkoittaa, että on yhteensä ' 9 ” lapsisolmut annetussa “
”-elementissä, mukaan lukien elementtien väliset välilyönnit.Esimerkki 2: 'childNodes'-ominaisuuden käyttäminen tietyn lapsisolmun nimen saamiseksi
'childNodes'-ominaisuutta voidaan käyttää myös 'nodeName'-ominaisuuden kanssa alisolmun (-solmujen) nimen saamiseksi. Katsotaanpa käytännössä.
JavaScript-koodi
Käy läpi seuraava koodi:
< käsikirjoitus >
const elem = document.getElementById ( 'Div' ) ;
antaa num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'for' ) .innerHTML = 'Elementti:' +numero;
käsikirjoitus >Täällä ' lapsisolmut ' omaisuus on linkitetty ' solmunNimi ”-ominaisuus saadakseen määritetyn alisolmun nimen käytettävän indeksin perusteella, eli '1'.
Lähtö
Tulos näyttää lapsisolmun nimen eli 'H2'-elementin määritettyä indeksiä vastaan.
Esimerkki 3: 'childNodes'-ominaisuuden käyttäminen tietyn lapsisolmun tekstin värin muuttamiseen
Tämä esimerkki käyttää käsiteltyä ominaisuutta muuttamaan kohteena olevan indeksoidun lapsen väriä.
JavaScript-koodi
Harkitse seuraavaa koodia:
< käsikirjoitus >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'vihreä' ;
käsikirjoitus >Täällä ' getElementById() ' -menetelmä hakee yläelementin '
' tunnuksensa 'Div' kautta ja sen alisolmun, joka sijoitetaan määritettyyn indeksiin '' lapsisolmut ” omaisuutta. Käytä sen jälkeen ' tyyli.väri ”-ominaisuutta muuttaaksesi käytetyn lapsisolmun tekstin väriä.Lähtö
Tulos vahvistaa, että määritetyn lapsisolmun tekstin väriä on muutettu asianmukaisesti.
Johtopäätös
JavaScriptissä ' lapsisolmut ”-ominaisuus hakee nodeList-objektin, joka sisältää kohde-HTML-elementin alisolmut. Lapsisolmuja pääsee käsiksi kaikkiin kerralla tai haluttuihin määrittämällä indeksinumero 'childNodes'-ominaisuuden avulla. Tämä ominaisuus sallii JavaScript-funktion suorittamisen erikoistehtävien suorittamiseksi käytettäville lapsisolmuille. Tässä artikkelissa käsiteltiin 'childNodes'-ominaisuuden käyttämistä JavaScriptissä.
- Määritä '