DOM

JAVASCRIPT JA DOM KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi
IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

DOM-malli ja elementtien haku dokumenttipuusta

Kun haluat muokata mitä tahansa elementtiä verkkosivulla, kaikki lähtee liikkeelle document-oliosta. Se tarjoaa pääsyn sivun taustalla olevaan DOM-puuhun, ja mahdollistaa sen että voit kulkea sivun rakenteessa ylhäältä alaspäin. Tämä lähestymistapa on modernin web-kehityksen perusta.

Elementtien etsimiseen DOMista on kaksi pääasiallista tapaa:

Kun elementti on haettu, sen muokkaaminen onnistuu sujuvasti käyttämällä DOM:n tarjoamia ominaisuuksia (kuten innerHTML), metodeja (kuten setAttribute()) ja kokoelmia (kuten style).

document ja muut suorat kokoelmaviittaukset

Keskeisin ja yleisin suora kokoelmaviittaus on tietenkin document. Se palauttaa viittauksen HTML- tai XML-dokumenttiin. Käytännössä lähes kaikki DOM-viittaukset lähtevät liikkeelle tästä:


consolo.log(document.nodeType) // 9 eli Document

Muita DOM-mallia tukevia suoraviittauksia ovat:

Esimerkisi: 


document.body.children // palauttaa suorat lapsielementit (HTMLCollection)

Selaimissa on edelleen myös useita ns. legacy-viittauksia – jäänteitä ajalta ennen yhtenäisen DOM-määrittelyn voimaantuloa. Nämä viittaukset ovat nopeita käyttää, koska ne välttävät DOM-puun uudelleenhakua, mutta ne eivät noudata DOM API:n nykyaikaista rakennetta. Tästä syystä niiden käyttöä kannattaa harkita tarkoin.

Lisäksi selaimet tukevat useita deprekoituja suoraviittauksia, kuten document.anchors ja document.all. Näiden käyttämistä tulisi välttää kokonaan.

Hakumetodit

DOM tarjoaa useita hakumetodeja solmujen etsimiseen dokumentista. Näistä keskeisimmät ovat:

Minkä tahansa elementin hakeminen id:n perusteella

document.getElementById() on yksi suoraviivaisimmista tavoista hakea yksittäinen elementti. Se palauttaa vain yhden elementin, jonka id-attribuutin arvo vastaa annettua arvoa. 


let header = document.getElementById('header');  // Hakee elementin ID:llä 'header'  - palauttaa yhden elementin

Minka tahansa elementin hakeminen class-namen perusteella

document.getElementsByClassName() hakee kaikki elementit, joilla on määritetty tietty CSS-luokka. Metodin paluuarvo on HTMLCollection-objekti, joka sisältää kaikki löydetyt elementit. 


let elements = document.getElementsByClassName('readalso');  // Hakee kaikki elementit, joilla on luokka 'readalso'

Minkä tahansa elementin hakeminen CSS-valitsimella

document.querySelector() on yksi tehokkaimmista tavoista etsiä HTML-elementtejä JavaScriptillä. Metodi käyttää CSS-valitsimia (kuten ID, luokka, elementtityyppi) elementtien paikallistamiseen. Tämä metodi palauttaa ensimmäisen osuman.


let element = document.querySelector('#my');  // Hakee ID:llä 'my' varustetun elementin

Jos etsit useampia elementtejä, harkitse document.querySelectorAll() metodia. Se palauttaa NodeList-objektin, joka sisältää kaikki CSS-valitsinta vastaavat elementit. Huomioi, että querySelectorAll() palauttaa nk. live-listauksen, eli elementtilistaus päivittyy automaattisesti aina kun DOM-puu muuttuu.


let element = document.querySelectorAll('p');  // hakee kaikki p-elementit

Minkä tahansa elementin hakeminen tagi-nimellä

document.getElementsByTagName() hakee kaikki elementit, jotka vastaavat tiettyä HTML-tagin nimeä. Metodin paluuarvo on HTMLCollection-objekti, joka päivittyy automaattisesti, jos dokumenttiin lisätään tai poistetaan elementtejä, jotka vastaavat hakuehtoa. 


let divs = document.getElementsByTagName('div');  // Hakee kaikki 
-elementit

Hakumetodien suorituskyky

Hakumetodit kyselevät DOM-puun rakennetta, minkä takia niiden käyttö voi olla raskaampaa etenkin jos sivulla on paljon solmuja. Tästä syystä hakumetodeja käyttäessä kannattaa pohtia kuinka usein dokumenttipuu muuttuu, ja kuinka usein samaa hakua hyödynnetään. Jos hakua hyödynnetään usein ja sivun rakenne on melko staattinen, suorituskykyä voidaan parantaa suorittamalla haku kerran ja tallettamalla sen tulos muuttujaan. Luonnollisesti jos DOM-muuttuu, täytyy muuttujan arvo päivittää erikseen:

Esimerkiksi alla sama kysely kahdella eri tavalla toteutettuna. Jälkimmäinen kyselytapa on jopa 10x nopeampi. Tämä havainnollistaa, kuinka pienilläkin muutoksilla koodissa voi olla merkittävä vaikutus suorituskykyyn. 


// huono tapa:
if (document.querySelectorAll("p").length > 0) {  // ensimmäinen haku
    for (var i = 0; i < document.querySelectorAll("p").length; i++) {   // 2. haku
        document.querySelectorAll("p")[i].style.color = "red";    //n:th haku
    }
}

// oikeaoppinen tapa: 
let para = document.querySelectorAll("p");  // ensimmäinen ja viimeinen haku
if (para.length > 0) {  // ensimmäinen haku
    for (var i = 0; i < para.length; i++) {   
        para[i].style.color = "green";    
    }
}

Artikkelin tiedot

Otsikko: DOM-malli ja elementtien haku dokumenttipuusta

Kuvaus: Tutustu DOM-hakumetodeihin. Opi erilaiset tavat löytää HTML-elementtejä DOM-puusta. Saat myös vinkkejä koodin optimointiin suorituskyvyn parantamiseksi.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: