วิธีค้นหา DOM Element ด้วย querySelectorAll()

การระบุและวิธีใช้

querySelectorAll() เมธอดกลับค่าชุดของลูกองค์ประกอบที่ตรงกับเลือกตัวเลือก CSS ซึ่งมีชุด NodeList ที่เป็นระบบเดี่ยว

NodeList

NodeList คือชุดตัวอนุกรม (node) ที่เป็นระบบเดี่ยว (array-like)

โครงสร้างตัวอนุกรมในลิสต์สามารถเข้าถึงด้วยอิงจาก index (ตัวเลขหลัก) ซึ่งเริ่มต้นจาก 0

ตัวแปร length สามารถกลับค่าจำนวนของโครงสร้างตัวอนุกรม (node) ในลิสต์

ดูเพิ่มเติมที่

คู่มืออ้างอิง:

ตัวแปร classList

ตัวแปร className

เมธอด querySelector()

เมธอด getElementsByTagName()

เมธอด getElementsByClassName()

อนุประเทศ HTML DOM Style

คู่มือ:

ระบบสัญลักษณ์ CSS

ตัวเลือก CSS

คู่มือตัวเลือก CSS

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าสีพื้นหลังขององค์ประกอบ class="example" แรกใน div:

// ค้นหาองค์ประกอบ id="myDIV" (div) และค้นหาองค์ประกอบที่มี class="example" ใน div
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// ตั้งค่าสีพื้นหลังขององค์ประกอบ class="example" แรก (index 0) ใน div
x[0].style.backgroundColor = "red";

ทดลองด้วยตัวเอง

คำแนะนำ:ตัวอย่างเพิ่มเติมอยู่ใต้หน้าเว็บ

ภาษาบอร์เดิร์น

element.querySelectorAll(cssSelectors)

ตัวเลือก

ตัวเลือก รายละเอียด
cssSelectors

จำเป็น ตัวเลข. ข้อความ. กำหนดเลือกตัวเลือก CSS หนึ่งหรือหลายตัวเพื่อตรงกับองค์ประกอบ

CSS Selector ใช้เพื่อเลือกรูปภาพ HTML บนฐานของ id, class, ชนิด, 属性, ค่าของ 属性 และอื่น ๆ

สำหรับเลือกตัวเลือกหลายตัว ใช้ comma แยกในแต่ละเลือกตัวเลือก

คำแนะนำ:รายการทั้งหมดของ Selectors CSS โปรดดูที่ คู่มือตัวเลือก CSS.

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

ค่าที่ส่งออกมา:

NodeList คือวัตถุที่แสดงชุดทั้งหมดของหลักหลายหลักทางด้านหลังที่ตรงกับเลือกตัวเลือก CSS

NodeList คือชุดที่เป็นระบบเดี่ยว ซึ่งกำหนดว่าการเปลี่ยนแปลงใน DOM จะไม่มีผลต่อชุด

หมายเหตุ：ถ้าเลือกตัวเลือกที่ระบุไม่ถูกต้อง จะโยนความผิดพลาด SYNTAX_ERR
เวอร์ชั่น DOM: Document Object Selectors Level 1

ตัวอย่างเพิ่มเติม

ตัวอย่าง 2

ค้นหา <p> ทั้งหมดใน <div> และตั้งค่าสีพื้นหลังของ <p> แรก (index 0):

// ขององค์ประกอบ id="myDIV" ซึ่งเป็น (div) และหาทุก p ใน div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// ตั้งค่าสีพื้นหลังของ <p> แรกใน div (index 0)
x[0].style.backgroundColor = "red";

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ค้นหา <div> ที่มี class="example" และตั้งค่าสี 배경ของ <p> แรก:

// ขององค์ประกอบ id="myDIV" ซึ่งเป็น (div) และหาทุก p ที่มี class="example" ใน div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// ตั้งสีพื้นหลังขององค์ประกอบ <p> แรกใน div ที่มี class="example" (index 0)
x[0].style.backgroundColor = "red";

ทดลองด้วยตัวเอง

ตัวอย่าง 4

หาจำนวนองค์ประกอบที่มี class="example" ในองค์ประกอบ <div> (ใช้คุณสมบัติ length ของ NodeList ตัวเดียว)

/* ขององค์ประกอบ id="myDIV" ซึ่งเป็น (div) และหาทุก p ที่มี class="example" ใน div และกลับค่าจำนวนองค์ประกอบที่หาได้ */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

ทดลองด้วยตัวเอง

ตัวอย่าง 5

ตั้งสีพื้นหลังสำหรับทุกองค์ประกอบ class="example" ใน <div>

// ขององค์ประกอบ id="myDIV" ซึ่งเป็น (div) และหาทุกองค์ประกอบที่มี class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");
// สร้าง loop for และตั้งสีพื้นหลังสำหรับทุก class="example" ใน div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

ทดลองด้วยตัวเอง

ตัวอย่าง 6

ตั้งสีพื้นหลังสำหรับทุก <p> ใน <div>

// ขององค์ประกอบ id="myDIV" ซึ่งเป็น (div) และหาทุก p ใน div
var x = document.getElementById("myDIV").querySelectorAll("p");
// สร้าง loop for และตั้งสีพื้นหลังของทุก p ใน div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

ทดลองด้วยตัวเอง

ตัวอย่าง 7

ตั้งรูปแบบของเส้นขอบสำหรับ <div> ที่มีคุณสมบัติ target

// ขององค์ประกอบ id="myDIV" ซึ่งเป็น (div) และหาทั้งหมด <a> ที่มีคุณสมบัติ "target"
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// สร้างรูปแบบ for และตั้งขอบเขตของ element ที่มี attribute targe tใน div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

ทดลองด้วยตัวเอง

ตัวอย่าง 8

ตั้งสี背影ทุก element ใน <div> ของ <h2>、<div> และ <span>:

// ของ element ที่มี id="myDIV" (div) และของ element ทั้งหมดใน <div> ของ <h2>、<div> และ <span>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// สร้างรูปแบบ for และตั้งสี背影ทุก element ใน <div> ของ <h2>、<div> และ <span>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

ทดลองด้วยตัวเอง

การสนับสนุนโปรแกรมนำ

ตัวเลขในตารางบ่งชี้การเปิดใช้งานของเบราซเซอร์ในการใช้วิธีนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

หมายเหตุ：Internet Explorer 8 สนับสนุนเลือกตัวเลือก CSS2 โดยที่ IE9 และรุ่นต่อไปยังสนับสนุน CSS3

หน้าที่เกี่ยวข้อง

รายละเอียด CSS：ตัวเลือก CSS

คู่มือตาราง CSS：คู่มือตัวเลือก CSS

รายละเอียด JavaScript：JavaScript HTML DOM Node List

คู่มือตาราง JavaScript：element.querySelector()

คู่มือตาราง HTML DOM：document.querySelectorAll()