Summary  
This chapter covers methods for selecting DOM elements in JavaScript—such as getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll—explaining their return types (single element, live HTMLCollection, or static NodeList), live vs. static behavior, and performance considerations.  

General domain of usage  
Front-end web development

## 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.<br>
**Käyttötarkoitus**: Paras vaihtoehto, kun halutaan valita tietty elementti tunnetulla ID:llä.<br>
**Palauttaa**: Yhden elementin tai `null`, jos elementtiä ei löydy.
```html
// 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ä.<br>
**Käyttötarkoitus**: Hyödyllinen, kun halutaan valita useita elementtejä samalla luokalla.<br>
**Palauttaa**: Live-HTMLCollection, joka päivittyy, jos DOM muuttuu.<br>
**Rajoitukset**: Taulukkometodeja ei voi käyttää suoraan; kokoelma täytyy muuntaa taulukoksi tarvittaessa.
```html
// 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.<br>
**Käyttötarkoitus**: Soveltuu kaikkien tietyn tyyppisten elementtien valintaan.<br>
**Palauttaa**: Elävä HTMLCollection-elementtikokoelma.<br>
**Rajoitukset**: Epätarkka, koska valitsee kaikki annetun tagin elementit kontekstissa.
```html
// 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ää <u>mitä tahansa kelvollista CSS-valitsinta elementtien löytämiseen</u>.<br>
**Käyttötarkoitus**: Soveltuu ensimmäisen CSS-valitsimeen sopivan elementin valintaan.<br>
**Palauttaa**: Ensimmäinen vastaava elementti tai `null`, jos sopivaa ei löydy.
```html
// 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` <u>valitsee kaikki CSS-valitsimeen sopivat elementit</u> ja palauttaa staattisen NodeListin. Toisin kuin muut menetelmät, se ei päivity dynaamisesti DOMin muuttuessa.<br>
**Käyttötarkoitus**: Soveltuu useiden elementtien valintaan monimutkaisilla valitsimilla.<br>
**Palauttaa**: Staattinen NodeList-elementtikokoelma, joka ei päivity automaattisesti.
```html
// 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
```


## Käytännön esimerkki: Lomakkeen validointi
Yhdistetään nämä menetelmät käytännön tilanteessa: virheellisten lomakekenttien korostaminen luokkien avulla.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGZvcm0gaWQ9InVzZXItZm9ybSI+CiAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBjbGFzcz0iaW5wdXQtZmllbGQiIHBsYWNlaG9sZGVyPSJOYW1lIiAvPgogICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGNsYXNzPSJpbnB1dC1maWVsZCIgcGxhY2Vob2xkZXI9IkVtYWlsIiAvPgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+U3VibWl0PC9idXR0b24+CiAgICA8L2Zvcm0+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdQb3BwaW5zJywgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjNmNGY2OwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBtaW4taGVpZ2h0OiAxMDB2aDsKfQoKI3VzZXItZm9ybSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBwYWRkaW5nOiAzMHB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYm94LXNoYWRvdzogMCAxMHB4IDIwcHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDIwcHg7CiAgd2lkdGg6IDMyMHB4Owp9CgouaW5wdXQtZmllbGQgewogIHBhZGRpbmc6IDE0cHg7CiAgYm9yZGVyOiA0cHggc29saWQgI2RkZDsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgZm9udC1zaXplOiAxNnB4OwogIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAwLjNzLCBib3gtc2hhZG93IDAuM3M7Cn0KCi5pbnB1dC1maWVsZDpmb2N1cyB7CiAgYm9yZGVyLWNvbG9yOiAjMjU2M2ViOwogIG91dGxpbmU6IG5vbmU7CiAgYm94LXNoYWRvdzogMCAwIDVweCByZ2JhKDM3LCA5OSwgMjM1LCAwLjMpOwp9CgouaW5wdXQtZmllbGQ6OnBsYWNlaG9sZGVyIHsKICBjb2xvcjogIzljYTNhZjsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxNHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMyNTYzZWI7CiAgY29sb3I6ICNmZmZmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDhweDsKICBmb250LXNpemU6IDE2cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcywgdHJhbnNmb3JtIDAuMnM7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzFkNGVkODsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTJweCk7Cn0KCmJ1dHRvbjphY3RpdmUgewogIGJhY2tncm91bmQtY29sb3I6ICMxZTQwYWY7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApOwp9

Y29uc3QgZm9ybUVsID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3VzZXItZm9ybScpOwpjb25zdCBpbnB1dEVscyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJy5pbnB1dC1maWVsZCcpOwoKZm9ybUVsLmFkZEV2ZW50TGlzdGVuZXIoJ3N1Ym1pdCcsIGZ1bmN0aW9uIChldmVudCkgewogIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7CgogIC8vIENoZWNrIGVhY2ggaW5wdXQgZmllbGQgZm9yIGVtcHR5IHZhbHVlcwogIEFycmF5LmZyb20oaW5wdXRFbHMpLmZvckVhY2goaW5wdXQgPT4gewogICAgaWYgKCFpbnB1dC52YWx1ZSkgewogICAgICBpbnB1dC5zdHlsZS5ib3JkZXJDb2xvciA9ICdyZWQnOyAvLyBIaWdobGlnaHQgZW1wdHkgZmllbGRzCiAgICB9IGVsc2UgewogICAgICBpbnB1dC5zdHlsZS5ib3JkZXJDb2xvciA9ICdncmVlbic7IC8vIFJlc2V0IGJvcmRlciBpZiBmaWxsZWQKICAgIH0KICB9KTsKfSk7

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

Mitä menetelmää käyttäisit valitaksesi elementin sen yksilöllisen ID:n perusteella?

Jos haluat valita ensimmäisen elementin, jolla on luokka `box`, ja hakea sen `id`-attribuutin, mitä menetelmää käyttäisit?

Seuraavassa HTML-koodissa, mitä `console.log(contentEls.length);` tulostaa?

Hallitse keskeiset JavaScript-konseptit, kuten luokat, DOM-manipulointi, tapahtumien käsittely ja asynkroninen ohjelmointi. Opiskele dynaamisten ja interaktiivisten verkkosovellusten luomista hallitsemalla käyttäjän vuorovaikutuksia, tietojen hakua ja näyttämistä sekä asynkronisten toimintojen tehokasta käsittelyä. Kurssi yhdistää teoriaa, käytännön haasteita ja tosielämän esimerkkejä, tarjoten käytännön taidot moderniin web-kehitykseen.

Opi JavaScript-luokkien perusteet, luokkien määrittelystä toimintaa laajentavien metodien luomiseen. Tutustu parametriesineiden tehokkaaseen käyttöön, yksityisten ominaisuuksien hallintaan sekä pääsyn rajoittamiseen gettereillä ja settereillä. Hallitse staattiset ominaisuudet ja staattiset metodit sekä hyödynnä luokkaperintää "extends"- ja "super()"-avainsanoilla skaalautuvan ja uudelleenkäytettävän koodin rakentamiseksi.

Hallitse DOM-manipulointi dynaamisten ja interaktiivisten web-sovellusten luomiseksi. Selaa ja muokkaa DOM:n rakennetta, päivitä sisältöä dynaamisesti sekä toteuta parhaat käytännöt turvallisuuden ja suorituskyvyn varmistamiseksi. Erota ominaisuudet ja attribuutit koodin optimointia varten.

Avaa verkkosovellustesi vuorovaikutteisuus hallitsemalla JavaScript-tapahtumat. Ymmärrä tapahtumien eteneminen, hallitse tapahtumien käyttäytymistä ja toteuta tehokas tapahtumien käsittely käyttäjävuorovaikutuksia varten. Optimoi suorituskyky edistyneillä tekniikoilla, kuten tapahtumien delegoinnilla.

Syvenny asynkroniseen JavaScriptiin, mukaan lukien callbackit, Promiset ja async/await. Opi hakemaan dataa API-rajapinnoista, integroimaan kolmannen osapuolen kirjastoja sekä käsittelemään useita pyyntöjä tehokkaasti, kehittäen taitoja datavetoisten sovellusten rakentamiseen.

Elementtien Kysely ja Valinta DOM:ssa

Elementtien Kysely ja Valinta DOM:ssa