JavaScriptда элементлар гуруҳини олиш

Олдинги дарсларда биз querySelector усули ёрдамида саҳифанинг бир элементини олган эдик. Энди эса элементлар гуруҳини олиш ва бир нечта элемент билан бирданига айрим амалларни бажаришни ўрганиш вақти келди.

Бунинг учун querySelectorAll усули мавжуд бўлиб, у CSS селекторига тўғри келадиган барча тегларни элементлар массиви кўринишида олади. Топилган элементлар бирон нарса килиш учун олинган массив билан ишлаш керак, масалан, уни цикл билан айлантириш ва цикл ичида ҳар бир элемент билан алоҳида айрим амалларни бажариш.

Масалан, бизда www синали абзацлар бор деб фараз қилайлик:

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

Келик, бу абзацлар массивини оламиз, уларни цикл билан айлантирамиз ва цикл ичида топилган абзацлар матнини консольга чиқарайлик:

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

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

Энди эса ҳар бир абзац матнининг охирига ундош белгиси қўшайлик:

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

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

Абзацлар ва тугма берилган. Тугма босилганда барча абзацларни топинг, уларни цикл билан айлантиринг ва ҳар бир абзац матнини 'text' қийматига ўрнатинг.

Матнли абзацлар ва тугма берилган. Тугма босилганда ҳар бир абзац матнининг охирига унинг тартиб рақамини ёзинг.

Сонли инпутлар, абзац ва тугма берилган. Тугма босилганда инпутлардан олинган сонлар йиғиндисини топинг ва бу йиғиндини абзац матига ёзинг.