Гурӯҳи унсурҳоро дар JavaScript гирифтан

Дар дарсҳои гузашта мо бо ёрии усули querySelector як унсури саҳифаро мегирифтем. Акнун вақти он расидааст, ки биёмӯзем гурӯҳи унсурҳоро гирем ва амалиёти муайянро бо якбора бо бисёр унсурҳо анҷом диҳем.

Барои ин усули querySelectorAll вуҷуд дорад, ки ҳамаи тегҳои дахлдори селектори CSS-ро дар шакли массиви унсурҳо мегирад. Барои кореро бо унсурҳои ёфташуда анҷом додан, бояд бо массиви гирифташуда кор кард, масалан, онро бо давр такрор кард ва дар давр амалиёти муайянро бо ҳар як унсур ба таври алоҳида иҷро кард.

Бигзор, масалан, мо парраграфҳое дорем бо синфи www:

<p class="www">матн1</p>
<p class="www">матн2</p>
<p class="www">матн3</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 + '!';
}

Парраграфҳо ва тугма дода шудаанд. Босили тугма ҳамаи парраграфҳоро ёбед, онҳоро бо давр такрор кунед ва матни ҳар як парраграфро ба қимати 'матн' гузоред.

Парраграфҳо бо матн ва тугма дода шудаанд. Босили тугма ба охири матни ҳар як парраграф рақами тартибиашро нависед.

Воҳидҳои воридкунии рақамҳо, парраграф ва тугма дода шудаанд. Босили тугма маблағи рақамҳоро аз воҳидҳои воридкунӣ ёбед ва ин маблағро ба матни парраграф нависед.