Marrja e një grupi elementësh në JavaScript

Në mësimet e mëparshme ne me ndihmën e metodës querySelector kemi marrë një element të faqes. Tani ka ardhur koha të mësojmë të marrim një grup elementësh dhe të kryejmë disa operacione menjëherë me shumë elementë.

Për këtë ekziston metoda querySelectorAll, e cila merr të gjitha etiketat që i nënshtrohen CSS selector-it, në formën e një grupi elementësh. Për të bërë diçka me elementët e gjetur, është e nevojshme të punohet me grupin e marrë, për shembull, të përsëritet ai me një cikël dhe në cikël të ekzekutohet ndonjë operacion me secilin element veç e veç.

Le të themi, për shembull, që kemi paragrafë me klasën www:

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

Le të marrim grupin e këtyre paragrafëve, t'i përsërisim ata me një cikël dhe në cikël të shfaqim tekstet e paragrafëve e gjetur në konsol:

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

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

Dhe tani le të shtojmë në fund të tekstit të çdo paragrafi një shenjë pikëçuditëse:

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

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

Janë dhënë paragrafë dhe një buton. Me klikim në buton gjeni të gjithë paragrafët, përsëritini ata me cikël dhe vendosni tekstin e çdo paragrafi në vlerën 'text'.

Janë dhënë paragrafë me tekst dhe një buton. Me klikim në buton shkruani në fund të tekstit të çdo paragrafi numrin e tij rendor.

Janë dhënë inpute me numra, një paragraf dhe një buton. Me klikim në buton gjeni shumën e numrave nga inputet dhe shkruani këtë shumë në tekstin e paragrafit.