DOM (Document Object Model)

Tredun ohjelmistokehittäjien kurssimateriaaleja

DOM (Document Object Model)

DOM on ohjelmointirajapinta verkossa oleville dokumenteille eli käytännössä HTML:lle. Se kuvaa sivun rakennetta, joten sen kautta voi muuttaa dokumentin rakennetta tyyliä ja sisältöä. Usein puhutaan rakennepuusta, jonka juuressa (root) on HTML-elementti.

Tässä on Wikipedian kuva yksinkertaisesta DOM-puusta. Sen juuri on <html>.

DOM-puu

DOM muodostuu node:ista. Parent-nodella on child-nodeja (descendant-node), ja jos lapsia on useita ne ovat toisilleen siblings-node:ja. Text-node on oma tyyppinsä ja se sisältää tekstiä. Puuta voi selata järjestyksessä root-nodesta eteenpäin, kyselemällä aina seuraavaa jälkeläistä, sisarusta jne. Sellaisia nodeja, joilla on oma HTML-taginsä kutsutaan elementeiksi. Elementtejä voidaan etsiä muokattavaksi niiden CSS-selectoreiden avulla. querySelector etsii elementtejä niiden tyypin (esim. “div”, “h1”), luokan (esim. “.error”) tai id:n (esim. “#info”) avulla.

Yksittäisen HTML-sivun DOMia voi tarkastella esimerkiksi kehittäjätyökalujen Elements-välilehdellä. Siellä näkyy selvästi, että palaset ovat järjestäytyneet sisäkkäin. Niitä klikkaamalla pääsee tarkastelemaan aina sisällä olevia nodeja eli childeja.

DOM:ia voi käsitellä eri ohjelmointikielien avulla. Yleisin on JavaScript, mutta se onnistuu myös mm. PHP:n avulla. DOM:iin pääsee käsiksi documentin avulla, mitä olemme jo alkaneet käyttää. Kyseinen document viittaa siis HTML-dokumenttiin, jota selain lukee ja jonka sisältöä se renderöi, ja se on olio, jolla on omia metodeja.

Jos haluamme valita sivun ensimmäisen <p>-elementin, voimme tehdä sen seuraavasti script-tagin sisällä:

const paragraph = document.querySelector("p");

Käytännössä siis kutsumme document-olion metodia nimeltään querySelector ja annamme sille parametrin “p”. Luomme siitä uuden muuttujan, jota voimme käsitellä. Voimme valita myös kaikki saman kriteerin täyttävät elementit querySelectorAll-metodilla, jolloin saamme taulukon elementeistä. Voimme käyttää valinnassa myös muita kriteerejä kuin elementin nimeä eli classia tai idtä. classin eteen tulee piste ja idn eteen tulee # kuten CSS:äkin. Muuttujan luonnin jälkeen voimme muuttaa sitä.

paragraph-muuttujan tietotyyppi on object, jolla on automaattisesti joukko metodeja, jotka se on perinyt (periytymisestä tulee myöhemmin lisää) sekä joukko ominaisuuksia. Usein käytettyjä on esimerkiksi style, jolla puolestaan on omia ominaisuuksiaan, sillä se käsittelee elementin tyyliä.

paragraph.style.display = "none";

Esimerkissä valitaan muuttujan style-ominaisuus ja siltä display-ominaisuus. Sille annetaan arvo “none”, mikä käytännössä poistaa elementin sivulta. Periaatteessa stylen jälkeen kirjoitetaan CSS-ominaisuus, jota muutetaan, ja sen jälkeen sen uusi arvo, kuten CSS-koodissa.

Näitä asioita voi kirjoittaa joko HTML-koodiin script-tagin sisään, erilliseen linkitettyyn tiedostoon tai vaikka selaimen konsoliin. Tosin selaimen konsolin kautta tehdyt muutokset eivät ole pysyviä, sillä ne eivät tallennu HTML-tiedostoon, vaan sivun uudelleenlataaminen poistaa muutokset.

Jos yhden elementin sijaan haluaisimme valita vaikkapa kaikki p-elementit, meidän pitäisi käyttää querySelectAllia.

const paragraphs = document.querySelectorAll("p");

Tällä me saamme NodeListin, joka muistuttaa taulukkoa, joskaan ei ole aivan identtinen.

NodeListin voi käydä läpi forEach-metodilla:

paragraphs.forEach((paragraph) => {
  console.log(paragraph.textContent);
});

Tämä tulostaa kaikkien p-elementtien tekstit konsoliin.

paragraphs.forEach((paragraph) => {
  paragraph.textContent = "Teksti on muutettu!";
});

Tässä taas kaikkien tekstit vaihdetaan.

Demotehtävä

  1. Avaa opettajan tekemä matkalaskurisivu.
  2. Avaa kehittäjätyökalut (näppäinyhdistelmä ctrl+shift+i tai oikean yläreunan kolme pistettä ja sieltä “Lisää työkaluja”).
  3. Tutki elements-välilehteä ja etsi sieltä kaikki label-elementit ja katso niiden tyylit napsauttamalla jotain niistä.
  4. Vaihda console-välilehdelle ja ala kirjoittaa JavaScript-koodia.
  5. Valitse kaikki label-elementit ja muuta niiden väri punaiseksi (muista, että kyseessä on NodeList).
  6. Muuta myös koko sivun tausta vaaleansiniseksi (aliceblue).

HUOM. Konsoliin kirjoitetut muutokset häviävät sivulta, kun sivu ladataan uudelleen.