JavaScriptin DOM (Document Object Model) on tärkeä käsite selainpohjaisessa ohjelmoinnissa. Se määrittää, kuinka selain luo HTML-sivun elementtejä ja niiden välisiä suhteita.
DOM on selainpohjainen ohjelmointi API (Application Programming Interface), joka tarjoaa tavan käsitellä HTML-sivun elementtejä ja muokata niitä JavaScriptin avulla. Se koostuu hierarkisesta puurakenteesta, jossa jokainen HTML-elementti on node ja sen lapsielementit ovat sen alapuolella olevia nodeja. DOM tarjoaa joukon API:ja, joiden avulla voit käydä läpi sivun elementit, muuttaa niiden sisältöä ja lisätä tai poistaa elementtejä.
JavaScriptin DOM API tarjoaa useita tärkeitä ominaisuuksia, joiden avulla voit käsitellä HTML-sivun elementtejä. Näitä ovat muun muassa:
- getElementById: Tämä ominaisuus palauttaa HTML-sivun elementin, jonka tunniste vastaa annettua ID:tä.
- getElementsByTagName: Tämä ominaisuus palauttaa kaikki HTML-sivun elementit, jotka vastaavat annettua tag-nimeä.
- getElementsByClassName: Tämä ominaisuus palauttaa kaikki HTML-sivun elementit, jotka vastaavat annettua luokkanimeä.
- innerHTML: Tämä ominaisuus antaa mahdollisuuden asettaa HTML-elementin sisältö.
- parentNode: Tämä ominaisuus palauttaa HTML-elementin vanhemman solmun.
- childNodes: Tämä ominaisuus palauttaa kaikki HTML-elementin lapsielementit.
- createElement: Tämä ominaisuus luo uuden HTML-elementin.
- appendChild: Tämä ominaisuus lisää uuden HTML-elementin olemassa olevan HTML-elementin lapsielementiksi.
DOM:in käyttö JavaScriptissä voi olla erittäin hyödyllistä, kun haluat muuttaa sivun elementtejä dynaamisesti käyttäjän toiminnan perusteella, tai etsiä elementin sivulta ja lukea sen arvon.
Harjoittele
Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.
Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.