วิธี querySelectorAll() ของ HTML DOM Document

  • เพจก่อนหน้า
  • เพจต่อไป
  • กลับไปยังเพจก่อนหน้า HTML DOM Documents

คำนำทางและการใช้งาน

querySelectorAll() วิธีนี้กลับองค์ประกอบทั้งหมดที่ตรงกับเลือกตัวเลือก CSS

querySelectorAll() วิธีนี้กลับค่า NodeList。

หากเลือกตัวเลือกผิด querySelectorAll() วิธีนี้จะทิ้งข้อผิดพลาด SYNTAX_ERR ข้อผิดพลาด。

ตัวอย่าง

ตัวอย่าง 1

เลือกทุกองค์ประกอบที่มี class="example":

document.querySelectorAll(".example");

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

ตัวอย่าง 2

เพิ่มสีพื้นหลังสำหรับองค์ประกอบ <p> แรก:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

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

ตัวอย่าง 3

เพิ่มสีพื้นหลังสำหรับองค์ประกอบ <p> แรกที่มี class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

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

ตัวอย่าง 4

จำนวนขององค์ประกอบที่มี class="example":

let numb = document.querySelectorAll(".example").length;

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

ตัวอย่าง 5

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

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

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

ตัวอย่าง 6

ตั้งสีหลังของทุก <p> องค์ประกอบ

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

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

ตัวอย่าง 7

ตั้งขอบเขตของทุก <a> องค์ประกอบที่ใช้คุณสมบัติ "target"

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

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

ตัวอย่าง 8

ตั้งสีหลังของทุก <p> องค์ประกอบที่เป็นเจ้าของ <div> องค์ประกอบ

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

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

ตัวอย่าง 9

ตั้งสีหลังของทั้งหมด <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(CSSselectors)

ตัวแปร

ตัวแปร อธิบาย
CSSselectors

จำเป็นต้องมี

CSS selector จะเลือกองค์ประกอบ HTML โดยเชื่อมโยง id, class, ชนิด, attribute, ค่า attribute และอื่น ๆ

สำหรับรายการที่สมบูรณ์ โปรดเข้าเว็บไซต์ของเรา คู่มืออ้างอิงเลือกเลขศัพท์ CSS.

สำหรับตัวเลือกหลายตัว ให้ใช้คำตัดของด้วยเครื่องหมาย , แบ่งให้เห็นได้ดี (ดูตัวอย่างด้านบน)

กลับคืนค่า

ชนิด อธิบาย
ตัว

เป็น NodeList ที่มีองค์ประกอบที่ตรงกับตัวเลือก CSS

ถ้าไม่หาพบจะกลับคืน NodeList ว่าง

ความแตกต่างระหว่าง HTMLCollection และ NodeList

NodeList และ HTMLcollection คล้ายกันมาก

ทั้งสองเป็นชุด (รายการ) ที่แบ่งย่อยมาจากต้นของเอกสาร (เอกข้อ) ที่คล้ายตัวแปลแบบตัวเลข ที่สามารถเข้าถึงองค์ประกอบ (องค์เอกข้อ) ด้วยเลขอินเดกซ์ (ตัวเลขด้านล่าง) อินเดกซ์เริ่มต้นจาก 0

ทั้งสองมี length อาทิตย์ที่กลับคืนรายการ (ชุด) ขององค์ประกอบที่มีอยู่ในรายการ (ชุด) โดยเลขตัวเลข

HTMLCollection คือเอลเมนต์ของเอกสารของชุด

NodeList คือโครงสร้างเอกสารของ (โครงสร้างเอลเมนต์ โครงสร้างแอตทริบิวต์ และโครงสร้างข้อความ)

สามารถเข้าถึงส่วนของ HTMLCollection ด้วยชื่อ หรือ id หรือเลขดัชนี

สามารถเข้าถึงส่วนของ NodeList โดยใช้เลขดัชนีเท่านั้น

HTMLCollection ทั้งหมดเป็นทันทีของชุด

ตัวอย่าง: ถ้าเพิ่มองเอลเมนต์ <li> ลงในรายการของ DOM รายการของ HTMLCollection จะเปลี่ยนแปลง

NodeList ทั่วไปเป็นสถานะที่ไม่เปลี่ยนแปลงของชุด

ตัวอย่าง: ถ้าเพิ่มองเอลเมนต์ <li> ลงในรายการของ DOM รายการของ NodeList จะไม่เปลี่ยนแปลง

getElementsByClassName() และ getElementsByTagName() มีคุณสมบัติที่จะกลับมาเป็น HTMLCollection ที่ปรับปรุงจริง

querySelectorAll() มีคุณสมบัติที่จะกลับมาเป็น NodeList ที่ไม่เปลี่ยนแปลง

childNodes มีคุณสมบัติที่จะกลับมาเป็น NodeList ที่ปรับปรุงจริง

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

document.querySelectorAll() เป็นคุณสมบัติของ DOM Level 3 (2004)

ทุกบราวเซอร์ทุกครั้งสนับสนุนมัน:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
การสนับสนุน 9-11 การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน

เพจที่เกี่ยวข้อง

ตัวเรียน:

เลือกเลขศัพท์ CSS

คู่มืออ้างอิงเลือกเลขศัพท์ CSS

ตัวเรียน NodeList ของ JavaScript

วิธีการ QuerySelector:

วิธีการ querySelector() ของ Element

วิธีการ querySelectorAll() ของ Element

วิธีการ querySelector() ของ Document

วิธีการ querySelectorAll() ของ Document

วิธีการ GetElement:

วิธีการ getElementById() ของ Document

วิธีการ getElementsByTagName() ของ Document

วิธีการ getElementsByClassName() ของ Document

  • เพจก่อนหน้า
  • เพจต่อไป
  • กลับไปยังเพจก่อนหน้า HTML DOM Documents