Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele DOM-hierarkian ja -suhteiden Ymmärtäminen | DOM-Manipulointi Interaktiivista Web-Kehitystä Varten
Edistynyt JavaScript-Osaaminen

bookDOM-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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

Tässä tilanteessa:

  • nextSibling siirtyy seuraavaan tehtävään ja merkitsee sen "seuraavaksi";
  • previousSibling merkitsee 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.html

index.css

index.css

index.js

index.js

copy

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?

question mark

Mikä on "emoelementti" (parent node) DOM:ssa?

Select the correct answer

question mark

Mitä ominaisuutta käyttäisit päästäksesi käsiksi kaikkiin elementin lapsisolmuihin, mukaan lukien tekstisolmut?

Select the correct answer

question mark

Mitä seuraavassa koodissa currentTask.previousElementSibling.textContent; tulostaa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

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.22

bookDOM-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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

Tässä tilanteessa:

  • nextSibling siirtyy seuraavaan tehtävään ja merkitsee sen "seuraavaksi";
  • previousSibling merkitsee 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.html

index.css

index.css

index.js

index.js

copy

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?

question mark

Mikä on "emoelementti" (parent node) DOM:ssa?

Select the correct answer

question mark

Mitä ominaisuutta käyttäisit päästäksesi käsiksi kaikkiin elementin lapsisolmuihin, mukaan lukien tekstisolmut?

Select the correct answer

question mark

Mitä seuraavassa koodissa currentTask.previousElementSibling.textContent; tulostaa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 4
some-alt