Էլեմենտների խումբ ստանալը 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' արժեքը:

Տրված են պարբերություններ տեքստով և կոճակ: Կոճակի վրա սեղմելիս գրեք յուրաքանչյուր պարբերության տեքստի վերջում նրա հերթական համարը:

Տրված են թվերով ինպուտներ, պարբերություն և կոճակ: Կոճակի վրա սեղմելիս գտեք ինպուտներից թվերի գումարը և գրեք այդ գումարը պարբերության տեքստում: