Johdanto DOM:n kyselyyn

DOM:n kysely tarkoittaa tiettyjen elementtien valitsemista ja käsittelemistä dokumentista, jotta niitä voidaan muokata tai käyttää vuorovaikutuksessa. JavaScript tarjoaa useita menetelmiä elementtien kyselyyn, joilla jokaisella on oma käyttötarkoituksensa ja toimintatapansa.

GetElementById

getElementById-menetelmällä valitaan yksittäinen elementti sen yksilöllisen ID:n perusteella. Se on yksi yleisimmin käytetyistä menetelmistä, koska ID:n tulee olla ainutlaatuinen dokumentissa.
Käyttötarkoitus: Paras vaihtoehto, kun halutaan valita tietty elementti tunnetulla ID:llä.
Palauttaa: Yhden elementin tai null, jos elementtiä ei löydy.

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassName valitsee elementit luokan nimen perusteella ja palauttaa live-HTMLCollection-kokoelman elementeistä.
Käyttötarkoitus: Hyödyllinen, kun halutaan valita useita elementtejä samalla luokalla.
Palauttaa: Live-HTMLCollection, joka päivittyy, jos DOM muuttuu.
Rajoitukset: Taulukkometodeja ei voi käyttää suoraan; kokoelma täytyy muuntaa taulukoksi tarvittaessa.

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName valitsee elementit niiden tagin nimen perusteella (esim. div, p) ja palauttaa elävän HTMLCollection-olion.
Käyttötarkoitus: Soveltuu kaikkien tietyn tyyppisten elementtien valintaan.
Palauttaa: Elävä HTMLCollection-elementtikokoelma.
Rajoitukset: Epätarkka, koska valitsee kaikki annetun tagin elementit kontekstissa.

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector valitsee ensimmäisen elementin, joka vastaa CSS-valitsinta. Menetelmä on monipuolinen, sillä voit käyttää mitä tahansa kelvollista CSS-valitsinta elementtien löytämiseen.
Käyttötarkoitus: Soveltuu ensimmäisen CSS-valitsimeen sopivan elementin valintaan.
Palauttaa: Ensimmäinen vastaava elementti tai null, jos sopivaa ei löydy.

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll valitsee kaikki CSS-valitsimeen sopivat elementit ja palauttaa staattisen NodeListin. Toisin kuin muut menetelmät, se ei päivity dynaamisesti DOMin muuttuessa.
Käyttötarkoitus: Soveltuu useiden elementtien valintaan monimutkaisilla valitsimilla.
Palauttaa: Staattinen NodeList-elementtikokoelma, joka ei päivity automaattisesti.

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

Näiden menetelmien erot

Palautustyypit

Dynaamiset vs. staattiset kokoelmat

CSS-valitsimet

Suorituskyky

Käytännön esimerkki: Lomakkeen validointi

Yhdistetään nämä menetelmät käytännön tilanteessa: virheellisten lomakekenttien korostaminen luokkien avulla.

getElementById-menetelmällä valitaan lomake-elementti, kun taas querySelectorAll hakee kaikki syötekentät, joilla on luokka .input-field. Lomakkeelle asetettu tapahtumankuuntelija "submit"-tapahtumalle estää oletuslähetyksen ja tarkistaa jokaisen syötekentän. Jos kenttä on tyhjä, se korostetaan punaisella reunuksella, kun taas täytetyt kentät saavat vihreän reunuksen, tarjoten käyttäjälle välitöntä visuaalista palautetta.