ตัวอย่าง
รับองค์ประกอบทั้งหมดในเอกสารที่มี class = "ตัวอย่าง":
var x =
document.querySelectorAll(".example"); ลองตัวเอง» เพิ่มเติม "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 เช่นกัน
วากยสัมพันธ์
document.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) ไม่ถูกต้อง |
ตัวอย่างอื่น ๆ
ตัวอย่าง
รับทั้งหมด <p> องค์ประกอบในเอกสารและกำหนดสีพื้นหลังแรก <p> องค์ประกอบ (index 0) :
// Get all <p> elements in the document
var x =
document.querySelectorAll("p");
// Set the
background color of the first <p> element
x[0].style.backgroundColor = "red"; ลองตัวเอง» ตัวอย่าง
รับทั้งหมด <p> องค์ประกอบในเอกสารที่มี class = "ตัวอย่าง" และกำหนดพื้นหลังของแรก <p> องค์ประกอบ:
// Get all <p> elements in the document with class="example"
var x =
document.querySelectorAll("p.example");
// Set the
background color of the first <p> element with class="example" (index
0)
x[0].style.backgroundColor = "red"; ลองตัวเอง» ตัวอย่าง
หาองค์ประกอบหลายวิธีด้วย class = "ตัวอย่าง" ที่มีอยู่ในเอกสาร (ใช้ระยะเวลาในคุณสมบัติของวัตถุ NodeList) ที่:
var x =
document.querySelectorAll(".example").length; ลองตัวเอง» ตัวอย่าง
กำหนดสีพื้นหลังขององค์ประกอบทั้งหมดในเอกสารที่มี class = "ตัวอย่าง":
var x = document.querySelectorAll(".example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} ลองตัวเอง» ตัวอย่าง
การตั้งค่าสีพื้นหลังของทุก <p> องค์ประกอบในเอกสาร:
var x = document.querySelectorAll("p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} ลองตัวเอง» ตัวอย่าง
กำหนดเขตแดนของทุก <a> องค์ประกอบในเอกสารที่มี "target" แอตทริบิวต์:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.border = "10px solid red";
} ลองตัวเอง» ตัวอย่าง
กำหนดสีพื้นหลังของทุก <p> องค์ประกอบที่ผู้ปกครองเป็น <div> องค์ประกอบ:
var x = document.querySelectorAll("div > p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} ลองตัวเอง» ตัวอย่าง
การตั้งค่าสีพื้นหลังของทุก <h2> <div> และ <span> องค์ประกอบในเอกสาร:
var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
สอน CSS: CSS Selectors
อ้างอิง CSS: CSS Selectors อ้างอิง
กวดวิชา JavaScript: รายการ JavaScript HTML DOM Node
HTML DOM อ้างอิง: เอกสาร querySelector()
HTML DOM อ้างอิง: องค์ประกอบ querySelectorAll()