Pridobivanje skupine elementov v JavaScript

V prejšnjih lekcijah smo z metodo querySelector pridobili en element strani. Zdaj je čas, da se naučimo pridobiti skupino elementov in izvajati operacije z mnogimi elementi naenkrat.

Za to obstaja metoda querySelectorAll, ki pridobi vse oznake, ki ustrezajo CSS selektorju, v obliki matrike elementov. Da naredimo kaj z najdenimi elementi, moramo delati z dobljeno matriko, na primer, jo preleteti z zanko in v zanki izvesti kakšno operacijo z vsakim elementom posebej.

Recimo, na primer, da imamo odstavke z razredom www:

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

Pridobimo matriko teh odstavkov, jo preletimo z zanko in v zanki izpišemo tekste najdenih odstavkov v konzolo:

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

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

In zdaj dodajmo klicaj na konec besedila vsakega odstavka :

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

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

Podani so odstavki in gumb. Ob kliku na gumb poiščite vse odstavke, jih preletite z zanko in nastavite besedilo vsakega odstavka na vrednost 'text'.

Podani so odstavki z besedilom in gumb. Ob kliku na gumb zapišite na konec besedila vsakega odstavka njegovo zaporedno številko.

Podani so vnosna polja s številkami, odstavek in gumb. Ob kliku na gumb poiščite vsoto števil iz vnosnih polj in zapišite to vsoto v besedilo odstavka.