JavaScript-de elementler toparyny almak

Öňki sapaklarda biz querySelector metodu bilen sahypanyň bir elementini alypdyk. Indi bolsa köp elementleri bir wagtda alyp we olar bilen birtoparlık hereketleri ýerine ýetirmegi öwrenmek wagty.

Bunun üçin querySelectorAll metody bar, bu metod CSS selektrine gabat gelyän ähli teglary elementler massiwy görnüşinde alýar. Tapylan elementler bilen bir zat etmek üçin, alnan massiw bilen işlemeli, meselem, ony aýlaw bilen aýlap geçmeli we aýlaw içinde her bir element bilen aýratynlykda bir işi ýerine ýetirmeli.

Meselem, bizde www klasly abzaslar bar diýeliň:

<p class="www">tekst1</p>
<p class="www">tekst2</p>
<p class="www">tekst3</p>

Geliň, bu abzaslaryň massiwini alalyň, olary aýlaw bilen aýlap geçeliň we aýlaw içinde tapylan abzaslaryň tekstlerini konsola çykaryň:

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

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

Indi bolsa geliň her abzasyň tekstiniň ahyryna çykyş belgisi goşalyň:

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

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

Abzaslar we düwme berlen. Düwmä basylanda ähli abzaslary tapyň, olary aýlaw bilen aýlap geçiň we her abzasyň tekstini 'text' bahasyna getiriň.

Teksti bilen abzaslar we düwme berlen. Düwmä basylanda her abzasyň tekstiniň ahyryna onuň tertip belgisini ýazyň.

Sanlar bilen inputlar, abzas we düwme berlen. Düwmä basylanda inputlardaky sanlaryň jemini tapyň we bu jemi abzasyň tekstine ýazyň.