Upataji Kundi la Vipengele katika JavaScript

Katika somo zilizopita tulitumia njia querySelector kupata kipengele kimoja cha ukurasa. Sasa ni wakati wa kujifunza kupata kundi la vipengele na kufanya shughuli fulani marra moja na vipengele vingi.

Kwa hili tunatumia njia querySelectorAll, inayopata vitambulisho vyote, vinavyolingana na kichaguzi cha CSS, kwa mfumo wa safu ya vipengele. Ili kufanya kitu na vipengele vilivyopatikana, inahitajika kufanya kazi na safu iliyopatikana, kwa mfano, kuipitia kwa kitanzi na katika kitanzi kufanya shughuli yoyote na kila kipengele mmoja mmoja.

Wacha, kwa mfano, tuwe na aya zenye darasa www:

<p class="www">maandishi1</p>
<p class="www">maandishi2</p>
<p class="www">maandishi3</p>

Wacha tupate safu ya aya hizi, tuzipitie kwa kitanzi na katika kitanzi tuandike maandishi ya aya zilizopatikana kwenye konsoli:

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

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

Na sasa wacha mwishoni mwa maandishi ya kila aya tuongeze alama ya mshangao:

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

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

Zipo aya na kifungo. Wakati kubonyeza kifungo pata aya zote, zipitie kwa kitanzi na uweke maandishi ya kila aya kwa thamini 'text'.

Zipo aya zenye maandishi na kifungo. Wakati kubonyeza kifungo andika mwishoni mwa maandishi ya kila aya nambari yake ya mlolongo.

Zipo vingilio vilivyo na nambari, aya na kifungo. Wakati kubonyeza kifungo pata jumla ya nambari kutoka kwa vingilio na uandike jumla hii kwenye maandishi ya aya.