Elementtiryhmän hakeminen JavaScriptissä

Edellisissä oppitunneissa haimme querySelector -menetelmällä yhden sivun elementin. Nyt on aika oppia hakemaan elementtiryhmä ja suorittamaan operaatioita useille elementeille kerralla.

Tätä varten on olemassa menetelmä querySelectorAll, joka hakee kaikki CSS-valitsimeen osuvat tagit elementtitaulukkona. Tehdäkseen jotain löydetyille elementeille, on työskenneltävä löydetyn taulukon kanssa, esimerkiksi läpikäytävä se silmukalla ja suoritettava jokin operaatio jokaiselle elementille yksitellen.

Oletetaan esimerkiksi, että meillä on kappaleet, joilla on luokka www:

<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

Haetaan näiden kappaleiden taulukko, läpikäydään ne silmukalla ja tulostetaan löydettyjen kappaleiden tekstit konsoliin:

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	console.log(elem.textContent);
}

Ja nyt lisätään jokaisen kappaleen tekstin loppuun huutomerkki:

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	elem.textContent = elem.textContent + '!';
}

Annettuina kappaleet ja painike. Painiketta painettaessa etsi kaikki kappaleet, läpikäy ne silmukalla ja aseta jokaisen kappaleen tekstiksi arvo 'text'.

Annettuina kappaleet tekstillä ja painike. Painiketta painettaessa kirjoita jokaisen kappaleen tekstin loppuun sen järjestysnumero.

Annettuina lukuina syötekentät, kappale ja painike. Painiketta painettaessa etsi syötekenttien lukujen summa ja kirjoita tämä summa kappaleen tekstiksi.