การรับกลุ่มขององค์ประกอบใน JavaScript

ในบทเรียนก่อนหน้านี้เราใช้เมธอด querySelector เพื่อรับองค์ประกอบหนึ่ง บนหน้าเว็บ ถึงเวลาที่จะเรียนรู้วิธีการรับ กลุ่มขององค์ประกอบและดำเนินการบางอย่างกับ องค์ประกอบหลายๆ องค์ประกอบพร้อมกัน

สำหรับสิ่งนี้มีเมธอด querySelectorAll ซึ่งจะรับแท็กทั้งหมดที่ตรงกับ CSS selector ในรูปแบบของอาร์เรย์ขององค์ประกอบ หากต้องการทำอะไรบางอย่างกับองค์ประกอบที่พบ คุณต้องทำงานกับอาร์เรย์ที่ได้รับ เช่น วนลูปผ่านมันและดำเนินการใดๆ กับแต่ละองค์ประกอบ แยกกันในลูป

ตัวอย่างเช่น เรามีย่อหน้าซึ่งมีคลาส 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'

ให้มีย่อหน้าที่มีข้อความและปุ่ม เมื่อคลิก ปุ่ม ให้เขียนลำดับที่ของแต่ละย่อหน้า ต่อท้ายข้อความของมัน

ให้มี input ที่มีตัวเลข ย่อหน้า และปุ่ม เมื่อคลิกปุ่ม ให้หาผลรวมของตัวเลขจาก input และเขียนผลรวมนี้ในข้อความของย่อหน้า