HTML DOM แบบสอบถามเอกสาร SelectorAll()
ตัวอย่าง
เลือกองค์ประกอบทั้งหมดที่มี class="example":
document.querySelectorAll(".example");
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
วิธี การquerySelectorAll()ส่งคืนองค์ประกอบทั้งหมดที่ตรงกับตัวเลือก CSS
วิธี การส่งquerySelectorAll()คืนNodeList
เมธอดส่ง ข้อquerySelectorAll()ยกเว้น SYNTAX_ERR หากตัวเลือกไม่ถูกต้อง
บทช่วยสอน:
บทช่วยสอนรายการโหนด JavaScript
วิธีการ QuerySelector:
Element querySelector() Method
Element querySelectorAll() Method
เอกสาร querySelectorAll() Method
วิธีการ GetElement:
เอกสาร getElementById() Method
HTML DOM NodeList / HTMLCollection
ความแตกต่างระหว่าง HTMLCollection และ NodeList
NodeListและHTMLCollection เป็นทั้งคอลเลกชัน (รายการ) ที่ เหมือนอาร์เรย์ของโหนด (องค์ประกอบ) ที่ดึงมาจากเอกสาร โหนดสามารถเข้าถึงได้โดยหมายเลขดัชนี ดัชนีเริ่มต้นที่ 0
อ อบเจ็กต์ทั้งสองมี คุณสมบัติ ความยาวที่ส่งคืนจำนวนองค์ประกอบในรายการ
HTMLCollection คือคอลเล็กชันแบบสด : หากคุณเพิ่มองค์ประกอบ <li> ในรายการใน DOM รายการใน HTMLCollection จะเปลี่ยนไปด้วย
NodeList คือคอลเล็กชันแบบคงที่หากคุณเพิ่มองค์ประกอบ <li> ในรายการใน DOM รายการใน NodeList จะไม่เปลี่ยนแปลง
และ เมธอดจะ getElementsByClassName()คืนgetElementsByTagName()
ค่า HTMLCollection
และ เมธอด querySelector()จะquerySelectorAll()
ส่งคืน NodeList
ไวยากรณ์
document.querySelectorAll(CSS selectors)
พารามิเตอร์
| Parameter | Description |
| CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
คืนมูลค่า
| พิมพ์ | คำอธิบาย |
| วัตถุ | NodeListที่มีองค์ประกอบที่ตรงกับตัวเลือก CSS หากไม่พบรายการที่ตรงกันจะ nullถูกส่งคืน |
ตัวอย่างเพิ่มเติม
เพิ่มสีพื้นหลังให้กับ <p> องค์ประกอบแรก:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
เพิ่มสีพื้นหลังให้กับ <p> องค์ประกอบแรกที่มี class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
จำนวนองค์ประกอบที่มี class="example":
let numb = document.querySelectorAll(".example").length;
ตั้งค่าสีพื้นหลังขององค์ประกอบทั้งหมดด้วย class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
ตั้งค่าสีพื้นหลังของ <p> องค์ประกอบทั้งหมด:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
กำหนดเส้นขอบขององค์ประกอบ <a> ทั้งหมดด้วยแอตทริบิวต์ "target":
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
ตั้งค่าสีพื้นหลังของทุก <p> องค์ประกอบที่ parent เป็น <div> องค์ประกอบ:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
ตั้งค่าสีพื้นหลังขององค์ประกอบ <h3>, <div> และ <span> ทั้งหมด:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
รองรับเบราว์เซอร์
document.querySelectorAll() เป็นคุณลักษณะ DOM ระดับ 3 (2004)
ได้รับการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์ทั้งหมด:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |