HTML DOM querySelectorAll() Method
❮ วัตถุธาตุตัวอย่าง
ตั้งค่าสีพื้นหลังขององค์ประกอบแรกด้วย class="example" ภายใน <div> องค์ประกอบ:
// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
วิธีการ querySelectorAll() ส่งคืนคอลเลกชันขององค์ประกอบย่อยขององค์ประกอบที่ตรงกับตัวเลือก CSS ที่ระบุ เป็นวัตถุ NodeList แบบคงที่
วัตถุ NodeList แสดงถึงชุดของโหนด โหนดสามารถเข้าถึงได้โดยหมายเลขดัชนี ดัชนีเริ่มต้นที่ 0
เคล็ดลับ:คุณสามารถใช้ คุณสมบัติ lengthของวัตถุ NodeList เพื่อกำหนดจำนวนโหนดย่อยที่ตรงกับตัวเลือกที่ระบุ จากนั้นคุณสามารถวนซ้ำทุกโหนดและดึงข้อมูลที่คุณต้องการ
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก CSS โปรดไปที่ บทช่วย สอนCSS Selectors และการอ้างอิงตัวเลือก CSSของเรา
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
หมายเหตุ: Internet Explorer 8 รองรับตัวเลือก CSS2 IE9 และเวอร์ชันที่ใหม่กว่านั้นรองรับ CSS3 เช่นกัน
ไวยากรณ์
element.querySelectorAll(CSS selectors)
ค่าพารามิเตอร์
| Parameter | Type | Description |
|---|---|---|
| CSS selectors | String | Required. Specifies one or more CSS selectors to match the element. These are used to select HTML
elements based on their id, classes, types, attributes, values of attributes,
etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
รายละเอียดทางเทคนิค
| รุ่น DOM: | Selectors ระดับ 1 Document Object |
|---|---|
| คืนมูลค่า: | ออบเจ็กต์ NodeList แสดงถึงองค์ประกอบที่สืบทอดทั้งหมดขององค์ประกอบปัจจุบันที่ตรงกับตัวเลือก CSS ที่ระบุ NodeList เป็นคอลเล็กชันแบบคงที่ หมายความว่าการเปลี่ยนแปลงใน DOM ไม่มีผลในคอลเล็กชัน หมายเหตุ:ส่งข้อยกเว้น SYNTAX_ERR หากตัวเลือกที่ระบุไม่ถูกต้อง |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
รับองค์ประกอบ <p> ทั้งหมดภายในองค์ประกอบ <div> และตั้งค่าสีพื้นหลังขององค์ประกอบ <p> แรก (ดัชนี 0):
// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";
ตัวอย่าง
รับองค์ประกอบ <p> ทั้งหมดใน <div> ที่มี class="example" และตั้งค่าพื้นหลังขององค์ประกอบ <p> แรก:
// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");
// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";
ตัวอย่าง
ค้นหาว่ามีองค์ประกอบกี่องค์ประกอบที่มี class="example" ในองค์ประกอบ <div> (โดยใช้คุณสมบัติความยาวของวัตถุ NodeList):
/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;
ตัวอย่าง
ตั้งค่าสีพื้นหลังขององค์ประกอบทั้งหมดที่มี class="example" ใน <div> องค์ประกอบ:
// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
ตัวอย่าง
ตั้งค่าสีพื้นหลังของ <p> องค์ประกอบทั้งหมดใน <div> องค์ประกอบ:
// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
ตัวอย่าง
กำหนดรูปแบบเส้นขอบขององค์ประกอบ <a> ทั้งหมดในองค์ประกอบ <div> ที่มีแอตทริบิวต์ "เป้าหมาย":
// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
ตัวอย่าง
ตั้งค่าสีพื้นหลังขององค์ประกอบ <h2>, <div> และ <span> ทั้งหมดในองค์ประกอบ <div>:
// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
หน้าที่เกี่ยวข้อง
บทช่วยสอน CSS: ตัวเลือก CSS
การอ้างอิง CSS: การอ้างอิงตัวเลือก CSS
บทช่วยสอน JavaScript: รายการโหนด JavaScript HTML DOM
การอ้างอิง HTML DOM: องค์ประกอบ .querySelector()
อ้างอิง HTML DOM: document.querySelectorAll()
❮ วัตถุธาตุ