HTML DOM querySelectorAll() Method

ตัวอย่าง

กำหนดสีพื้นหลังขององค์ประกอบแรกที่มี class = "เช่น" ภายในของ <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";

ลองตัวเอง»

เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง

ความหมายและการใช้งาน

querySelectorAll() วิธีการส่งกลับคอลเลกชันขององค์ประกอบขององค์ประกอบของเด็กที่ตรงกับ CSS ระบุ selector(s) เป็นวัตถุ NodeList แบบคงที่

วัตถุ NodeList หมายถึงคอลเลกชันของโหนด โหนดสามารถเข้าถึงได้โดยตัวเลขดัชนี ดัชนีเริ่มต้นที่ 0

เคล็ดลับ: คุณสามารถใช้ ระยะเวลาใน คุณสมบัติของวัตถุ NodeList เพื่อตรวจสอบจำนวนโหนดเด็กที่ตรงกับตัวเลือกที่ระบุแล้วคุณสามารถห่วงผ่านโหนดทั้งหมดและสารสกัดจากข้อมูลที่คุณต้องการ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ CSS Selectors เยี่ยมชมของเรา CSS Selectors การสอน ของเราและ CSS Selectors อ้างอิง

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ

วิธี
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

หมายเหตุ: Internet Explorer 8 มีการสนับสนุนเตอร์ CSS2 IE9 และรุ่นต่อมามีการสนับสนุน CSS3 เช่นกัน

วากยสัมพันธ์

element .querySelectorAll( CSS selectors )

ค่าพารามิเตอร์

พารามิเตอร์	ชนิด	ลักษณะ
CSS selectors	String	จำเป็นต้องใช้ ระบุหนึ่งหรือมากกว่าหนึ่งตัวเลือก CSS เพื่อให้ตรงกับองค์ประกอบ เหล่านี้จะถูกใช้ในการเลือกองค์ประกอบ HTML บนพื้นฐานของพวกเขา id, เรียนประเภทแอตทริบิวต์ค่าของคุณลักษณะอื่น ๆ สำหรับตัวเลือกหลายแยกแต่ละตัวเลือกด้วยเครื่องหมายจุลภาค เคล็ดลับ: สำหรับรายชื่อของทุก CSS Selectors ให้ดูที่เรา CSS Selectors อ้างอิง

รายละเอียดทางเทคนิค

DOM เวอร์ชัน:	ระดับ Selectors วัตถุ 1 เอกสาร
กลับค่า:	วัตถุ NodeList คิดเป็นองค์ประกอบลูกหลานทั้งหมดขององค์ประกอบปัจจุบันที่ตรงกับ CSS ระบุ selector(s) NodeList เป็นคอลเลกชันคงหมายความว่าการเปลี่ยนแปลงใน DOM ไม่มีผลในการเก็บรวบรวม หมายเหตุ: โยนข้อยกเว้น SYNTAX_ERR ถ้าระบุ selector(s) ไม่ถูกต้อง

DOM เวอร์ชัน:

ระดับ Selectors วัตถุ 1 เอกสาร

กลับค่า:

วัตถุ NodeList คิดเป็นองค์ประกอบลูกหลานทั้งหมดขององค์ประกอบปัจจุบันที่ตรงกับ CSS ระบุ selector(s) NodeList เป็นคอลเลกชันคงหมายความว่าการเปลี่ยนแปลงใน DOM ไม่มีผลในการเก็บรวบรวม

หมายเหตุ: โยนข้อยกเว้น SYNTAX_ERR ถ้าระบุ selector(s) ไม่ถูกต้อง

ตัวอย่างอื่น ๆ

ตัวอย่าง

รับทั้งหมด <p> องค์ประกอบภายใน <div> องค์ประกอบและกำหนดสีพื้นหลังแรก <p> องค์ประกอบ (index 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 = "ตัวอย่าง" และกำหนดพื้นหลังของแรก <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 = "เช่น" มีอยู่ใน <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 = "ตัวอย่าง" ใน <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> องค์ประกอบที่มี "target" แอตทริบิวต์:

// 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";
}

ลองตัวเอง»