เมธอด querySelectorAll

เมธอด querySelectorAll ช่วยให้สามารถได้มาซึ่ง องค์ประกอบของหน้าตามซีเล็กเตอร์ CSS ใดๆ โดยสามารถดำเนินการต่างๆ กับองค์ประกอบที่ได้มานั้นได้: เปลี่ยนแปลง ข้อความ, แอตทริบิวต์, สไตล์ CSS และอื่นๆ

ไวยากรณ์

document.querySelectorAll(ซีเล็กเตอร์);

ตัวอย่าง

ลองมาดูวิธีการได้มาซึ่งองค์ประกอบทั้งหมดที่มีคลาส www และเปลี่ยนแปลงข้อความของพวกมันด้วยคุณสมบัติ textContent:

<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) {
	elem.textContent = '!!!';
}

ผลลัพธ์จากการทำงานของโค้ด:

<p class="www">!!!</p>
<p class="www">!!!</p>
<p class="www">!!!</p>

ดูเพิ่มเติม

เมธอด querySelector,
ซึ่งได้มาซึ่งองค์ประกอบตามซีเล็กเตอร์
เมธอด getElementsByClassName,
ซึ่งได้มาซึ่งกลุ่มองค์ประกอบตามคลาส
เมธอด getElementsByTagName,
ซึ่งได้มาซึ่งกลุ่มองค์ประกอบตามแท็ก