DOM-hierarkian ja -suhteiden Ymmärtäminen
DOM-läpikäynti tarkoittaa dokumenttirakenteen selaamista JavaScriptin avulla eri solmujen (node) käsittelemiseksi, muokkaamiseksi tai niiden kanssa vuorovaikuttamiseksi. DOM on rakennettu puumaiseksi hierarkiaksi, jossa solmut liittyvät toisiinsa seuraavilla suhteilla: vanhempi, lapsi ja sisarus:
- Vanhempisolmu: Solmu, jonka sisällä on muita solmuja;
- Lapsisolmut: Solmut, jotka sijaitsevat suoraan vanhempisolmun sisällä;
- Sisarussolmut: Solmut, joilla on sama vanhempi ja jotka ovat samalla tasolla.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Tässä rakenteessa:
<ul>on<li>-elementtien vanhempi;- Jokainen
<li>on<ul>-elementin lapsi; - Kaksi
<li>-elementtiä ovat toistensa sisaruksia.
DOM:n navigointi
JavaScript tarjoaa useita ominaisuuksia näiden suhteiden selaamiseen, mikä mahdollistaa tehokkaan siirtymisen solmujen välillä.
ParentNode
parentNode-ominaisuuden avulla voit käyttää nykyisen solmun vanhempaa. Tämä on hyödyllistä, kun haluat siirtyä ylöspäin DOM-puussa.
index.html
index.js
Tässä esimerkissä parentNode hakee valitun <ul>-elementin vanhemman <li>-elementin ja lisää reunuksen koko listan ympärille.
ChildNodes
childNodes-ominaisuus palauttaa kokoelman kaikista tietyn elementin lapsisolmuista, mukaan lukien tekstisolmut (välilyönnit elementtien välillä).
index.html
index.js
Tässä esimerkissä valitaan tehtävälista ja käydään sen lapset läpi, lisäten täytettä jokaiselle <li>-elementille.
FirstChild ja LastChild
firstChild: Hakee elementin ensimmäisen lapsen, mukaan lukien tekstisolmut.
lastChild: Hakee elementin viimeisen lapsen, mukaan lukien tekstisolmut.
Oletetaan, että haluamme korostaa ostoskorin ensimmäisen ja viimeisen tuotteen.
index.html
index.js
Tämä esimerkki korostaa listan ensimmäisen ja viimeisen kohteen, havainnollistaen kuinka ensimmäiseen ja viimeiseen solmuun päästään käsiksi ja niitä voidaan muokata.
Koska firstChild ja lastChild viittaavat usein tekstisolmuihin (kuten välilyönteihin) varsinaisten elementtisolmujen (<li>) sijaan, parempi tapa on käyttää firstElementChild ja lastElementChild, jotka kohdistuvat nimenomaan ensimmäiseen ja viimeiseen lapsielementtiin ohittaen tekstisolmut.
PreviousSibling ja NextSibling
nextSibling: Hakee nykyisen solmun seuraavan sisarussolmun.
previousSibling: Hakee nykyisen solmun edellisen sisarussolmun.
Esimerkkinä tehtävälistassa liikkuminen tehtävien välillä, merkitsemällä tehtäviä "seuraavaksi" tai "aiemmin suoritetuksi."
index.html
index.js
Tässä tilanteessa:
nextSiblingsiirtyy seuraavaan tehtävään ja merkitsee sen "seuraavaksi";previousSiblingmerkitsee edellisen tehtävän suoritetuksi.
Kuitenkin, nextSibling ja previousSibling viittaavat usein tekstisolmuihin (esimerkiksi välilyönteihin). Jos halutaan kohdistaa varsinaisiin elementtisolmuihin (<li>), kannattaa käyttää nextElementSibling ja previousElementSibling, jotka ohittavat tekstisolmut.
Käytännön esimerkki: Tehtävienhallinta
Kuvitellaan, että rakennamme tehtävienhallintasovelluksen, jossa käyttäjät voivat lisätä, korostaa ja hallita tehtäviä. Haluamme päivittää tehtäviä dynaamisesti, merkitä ensimmäisen tehtävän "prioriteetiksi", korostaa seuraavan tehtävän "tulevaksi" ja merkitä viimeisen tehtävän "valmiiksi". Tämä esimerkki havainnollistaa DOM:n läpikäyntiä käyttäen parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling ja previousElementSibling -ominaisuuksia.
index.html
index.css
index.js
Kun "Korosta tehtävät" -painiketta painetaan, JavaScript lisää tehtäville erilaiset tyylit niiden sijainnin perusteella. firstElementChild merkitsee ensimmäisen tehtävän "Prioriteetiksi" lihavoidulla, keltaisella tyylillä. lastElementChild merkitsee viimeisen tehtävän "Valmiiksi" vihreällä ja yliviivatulla tyylillä. nextElementSibling korostaa toisen tehtävän "Tulevaksi" sinisellä, ja jos edellinen sisarus on olemassa, sille lisätään sininen reunus.
1. Mikä on "emoelementti" (parent node) DOM:ssa?
2. Mitä ominaisuutta käyttäisit päästäksesi käsiksi kaikkiin elementin lapsisolmuihin, mukaan lukien tekstisolmut?
3. Mitä seuraavassa koodissa currentTask.previousElementSibling.textContent; tulostaa?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me a code example of how to use these DOM traversal properties?
What is the difference between `childNodes` and `children` in JavaScript?
How do I avoid selecting text nodes when traversing the DOM?
Awesome!
Completion rate improved to 2.22DOM-hierarkian ja -suhteiden Ymmärtäminen
Pyyhkäise näyttääksesi valikon
DOM-läpikäynti tarkoittaa dokumenttirakenteen selaamista JavaScriptin avulla eri solmujen (node) käsittelemiseksi, muokkaamiseksi tai niiden kanssa vuorovaikuttamiseksi. DOM on rakennettu puumaiseksi hierarkiaksi, jossa solmut liittyvät toisiinsa seuraavilla suhteilla: vanhempi, lapsi ja sisarus:
- Vanhempisolmu: Solmu, jonka sisällä on muita solmuja;
- Lapsisolmut: Solmut, jotka sijaitsevat suoraan vanhempisolmun sisällä;
- Sisarussolmut: Solmut, joilla on sama vanhempi ja jotka ovat samalla tasolla.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Tässä rakenteessa:
<ul>on<li>-elementtien vanhempi;- Jokainen
<li>on<ul>-elementin lapsi; - Kaksi
<li>-elementtiä ovat toistensa sisaruksia.
DOM:n navigointi
JavaScript tarjoaa useita ominaisuuksia näiden suhteiden selaamiseen, mikä mahdollistaa tehokkaan siirtymisen solmujen välillä.
ParentNode
parentNode-ominaisuuden avulla voit käyttää nykyisen solmun vanhempaa. Tämä on hyödyllistä, kun haluat siirtyä ylöspäin DOM-puussa.
index.html
index.js
Tässä esimerkissä parentNode hakee valitun <ul>-elementin vanhemman <li>-elementin ja lisää reunuksen koko listan ympärille.
ChildNodes
childNodes-ominaisuus palauttaa kokoelman kaikista tietyn elementin lapsisolmuista, mukaan lukien tekstisolmut (välilyönnit elementtien välillä).
index.html
index.js
Tässä esimerkissä valitaan tehtävälista ja käydään sen lapset läpi, lisäten täytettä jokaiselle <li>-elementille.
FirstChild ja LastChild
firstChild: Hakee elementin ensimmäisen lapsen, mukaan lukien tekstisolmut.
lastChild: Hakee elementin viimeisen lapsen, mukaan lukien tekstisolmut.
Oletetaan, että haluamme korostaa ostoskorin ensimmäisen ja viimeisen tuotteen.
index.html
index.js
Tämä esimerkki korostaa listan ensimmäisen ja viimeisen kohteen, havainnollistaen kuinka ensimmäiseen ja viimeiseen solmuun päästään käsiksi ja niitä voidaan muokata.
Koska firstChild ja lastChild viittaavat usein tekstisolmuihin (kuten välilyönteihin) varsinaisten elementtisolmujen (<li>) sijaan, parempi tapa on käyttää firstElementChild ja lastElementChild, jotka kohdistuvat nimenomaan ensimmäiseen ja viimeiseen lapsielementtiin ohittaen tekstisolmut.
PreviousSibling ja NextSibling
nextSibling: Hakee nykyisen solmun seuraavan sisarussolmun.
previousSibling: Hakee nykyisen solmun edellisen sisarussolmun.
Esimerkkinä tehtävälistassa liikkuminen tehtävien välillä, merkitsemällä tehtäviä "seuraavaksi" tai "aiemmin suoritetuksi."
index.html
index.js
Tässä tilanteessa:
nextSiblingsiirtyy seuraavaan tehtävään ja merkitsee sen "seuraavaksi";previousSiblingmerkitsee edellisen tehtävän suoritetuksi.
Kuitenkin, nextSibling ja previousSibling viittaavat usein tekstisolmuihin (esimerkiksi välilyönteihin). Jos halutaan kohdistaa varsinaisiin elementtisolmuihin (<li>), kannattaa käyttää nextElementSibling ja previousElementSibling, jotka ohittavat tekstisolmut.
Käytännön esimerkki: Tehtävienhallinta
Kuvitellaan, että rakennamme tehtävienhallintasovelluksen, jossa käyttäjät voivat lisätä, korostaa ja hallita tehtäviä. Haluamme päivittää tehtäviä dynaamisesti, merkitä ensimmäisen tehtävän "prioriteetiksi", korostaa seuraavan tehtävän "tulevaksi" ja merkitä viimeisen tehtävän "valmiiksi". Tämä esimerkki havainnollistaa DOM:n läpikäyntiä käyttäen parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling ja previousElementSibling -ominaisuuksia.
index.html
index.css
index.js
Kun "Korosta tehtävät" -painiketta painetaan, JavaScript lisää tehtäville erilaiset tyylit niiden sijainnin perusteella. firstElementChild merkitsee ensimmäisen tehtävän "Prioriteetiksi" lihavoidulla, keltaisella tyylillä. lastElementChild merkitsee viimeisen tehtävän "Valmiiksi" vihreällä ja yliviivatulla tyylillä. nextElementSibling korostaa toisen tehtävän "Tulevaksi" sinisellä, ja jos edellinen sisarus on olemassa, sille lisätään sininen reunus.
1. Mikä on "emoelementti" (parent node) DOM:ssa?
2. Mitä ominaisuutta käyttäisit päästäksesi käsiksi kaikkiin elementin lapsisolmuihin, mukaan lukien tekstisolmut?
3. Mitä seuraavassa koodissa currentTask.previousElementSibling.textContent; tulostaa?
Kiitos palautteestasi!
