Frontend Academy · Oppitunti

querySelector ja querySelectorAll

Etsi yksittäisiä ja useita elementtejä CSS-valitsimien merkkijonoilla ja ymmärrä NodeList- ja HTMLCollection-kokoelmien ero.

Oppitunti 1/413 vaihetta

querySelector ja querySelectorAll on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mikä DOM on?

Dokumenttioliomalli on JavaScript-olioiden muodostama puu, joka esittää HTML-rakenteen. JavaScript käsittelee DOMia elementtien lukemiseen, muokkaamiseen, lisäämiseen ja poistamiseen, jolloin verkkosivuista tulee dynaamisia.

getElementById

Klassinen valitsin. document.getElementById('myId') palauttaa kyseisen tunnisteen sisältävän elementin tai arvon null, jos elementtiä ei löydy. Se on nopea, mutta toimii vain tunnisteiden kanssa.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — yksittäinen elementti

document.querySelector(cssSelector) palauttaa ensimmäisen elementin, joka vastaa mitä tahansa CSS-valitsinta. Jos osumia ei löydy, palautetaan null. Se on joustavampi kuin getElementById.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — useita elementtejä

document.querySelectorAll(cssSelector) palauttaa staattisen NodeListin, joka sisältää kaikki vastaavat elementit. Se ei ole elävä taulukko — sitä on iteroitava. Käyttäkää Array.from()-menetelmää tai levitysoperaattoria taulukkomenetelmien hyödyntämiseen.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Rajatut kyselyt

Voitte kutsua querySelector-menetelmää millä tahansa elementillä, jolloin haku kohdistuu vain kyseisen alipuuhun — ei koko dokumenttiin. Tämä on tehokkaampaa ja estää toisista sivun osista peräisin olevien elementtien valitsemisen vahingossa.

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList ja HTMLCollection

NodeList (jonka palauttaa querySelectorAll) on staattinen — se vastaa DOMin tilaa kyselyn hetkellä. HTMLCollection (jonka palauttavat esimerkiksi getElementsByClassName) on elävä — se päivittyy automaattisesti DOMin muuttuessa. Molemmat ovat taulukon kaltaisia, mutta eivät taulukoita.

DOMin läpikäynti

Mistä tahansa elementistä voi siirtyä DOMissa seuraavasti: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Elementin olemassaolon tarkistaminen

Tarkistakaa aina, ettei querySelector palauttanut arvoa null, ennen kuin käytätte tulosta. Tämä on erityisen tärkeää elementeille, joita ei välttämättä ole kaikilla sivuilla.

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() ja closest()

element.matches(selector) palauttaa arvon true, jos elementti vastaa valitsinta. element.closest(selector) kulkee DOM-puussa ylöspäin ja palauttaa ensimmäisen valitsinta vastaavan esi-isän tai arvon null.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) palauttaa arvon true, jos lapsielementti on isäelementin sisällä tai on sama kuin isäelementti. Se on hyödyllinen tarkistettaessa, tapahtuiko napsautus modaalin tai pudotusvalikon ulkopuolella.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Suorituskyky: minimoi DOM-haut

DOM-haut eivät ole ilmaisia. Tallentakaa tulos muuttujaan sen sijaan, että kutsuisitte querySelector-menetelmää toistuvasti. Kootkaa silmukoissa DOMin lukuoperaatiot ja kirjoitusoperaatiot erikseen, jotta vältätte asettelun jatkuvan uudelleenlaskennan.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Pikatarkistus

Mikä menetelmä palauttaa staattisen NodeListin kaikista vastaavista elementeistä?

Vastaa interaktiivisessa oppitunnissa

Kertaus: DOM-elementtien valitseminen

querySelector palauttaa ensimmäisen osuman. querySelectorAll palauttaa kaikki osumat staattisena NodeListinä. Rajatkaa haut alipuuhun tehokkuuden parantamiseksi. Tallentakaa kyselyjen tulokset välimuistiin. Käyttäkää closest()-menetelmää tapahtumien delegointiin. Tarkistakaa aina null-arvo ennen kyselyllä haetun elementin käyttämistä.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”querySelector ja querySelectorAll” ilmainen?

Kyllä – oppitunnin ”querySelector ja querySelectorAll” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”querySelector ja querySelectorAll”?

Etsi yksittäisiä ja useita elementtejä CSS-valitsimien merkkijonoilla ja ymmärrä NodeList- ja HTMLCollection-kokoelmien ero. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”querySelector ja querySelectorAll”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

querySelector ja querySelectorAll
addEventListener ja Event-objekti
Sisällön muuttaminen: textContent, innerHTML ja classList
Elementtien luominen ja liittäminen

← Takaisin: Frontend Academy