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

คำแนะนำหลักสูตร

querySelector() วิธีที่มีความหมายและวิธีใช้แรกองค์ประกอบ

ถ้าต้องการกลับค่าทั้งหมดรายการที่ตรงกัน (ไม่ใช่แค่รายการที่ตรงกันแรก) โปรดใช้ querySelectorAll()

ถ้าตัวเลือกไม่ถูกต้อง querySelector() และ querySelectorAll() จะทิ้งทอด SYNTAX_ERR ข้อผิดพลาด

ตัวอย่าง

ตัวอย่าง 1

เลือกองค์ประกอบ <p> แรก

document.querySelector("p");

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

ตัวอย่าง 2

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

document.querySelector(".example");

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

ตัวอย่าง 3

เลือกองค์ประกอบ <p> แรกที่มี class="example"

document.querySelector("p.example");

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

ตัวอย่าง 4

เปลี่ยนข้อความขององค์ประกอบที่มี id="demo"

document.querySelector("#demo").innerHTML = "Hello World!";

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

ตัวอย่าง 5

เลือกองค์ประกอบ <p> แรกที่มีหลักประกอบ <div> ในตำแหน่งบน

document.querySelector("div > p");

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

ตัวอย่าง 6

เลือกองค์ประกอบ <a> แรกที่มีคุณสมบัติ "target"

document.querySelector("a[target]");

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

ตัวอย่าง 7

เลือกองค์ประกอบ <h3> หรือ <h4> แรก

<h3>องค์ประกอบ h3</h3>
<h4>องค์ประกอบ h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

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

ตัวอย่าง 8

เลือกองค์ประกอบ <h3> หรือ <h4> แรก

<h4>องค์ประกอบ h4</h4>
<h3>องค์ประกอบ h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

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

การใช้งาน

document.querySelector(cssSelectors)

ตัวแปร

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

สำคัญ

ตัวเลือก CSS ใช้เลือกรายการ HTML ตาม id, class, ประเภท, 属性, ค่า属性 และอื่นๆ

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

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

ค่าที่กลับค่า

ประเภท การอธิบาย
วัตถุ

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

ถ้าไม่พบรายการที่ตรงกัน จะกลับค่า null

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

NodeList และ HTMLcollection มีความคล้ายคลึงกันมาก

ทั้งสองเป็นชุดของโหลด (อิเลเมนต์) ที่เหมือนตารางจากเอกสาร ซึ่งสามารถเข้าถึงด้วยหมายเลขดัชนี (index) หรือตัวอักษรตัวแรก หรือตัวอักษรตัวสุดท้าย

ทั้งสองมี length ขั้นตอนการใช้งาน มีคุณสมบัติที่กลับมาเป็นจำนวนของอิเลเมนต์ในลิสต์ (ชุด)

HTMLCollection คืออิเลเมนต์เอกสารส่วนของครงความ

NodeList คือตัวอุปกรณ์เอกสารส่วนของ (เอเลเมนต์โหลดสาย ตัวแปร และตัวอักษรสาย)

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

อิเลเมนต์ NodeList สามารถเข้าถึงด้วยหมายเลขดัชนีเท่านั้น

HTMLCollection มักเป็นสถานะเดี่ยวส่วนของครงความ

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

NodeList โดยทั่วไปเป็นสถานะเดี่ยวส่วนของครงความ

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

getElementsByClassName() และ getElementsByTagName() ขั้นตอนการใช้งานทั้งหมดกลับมาเป็น HTMLCollection ที่เปลี่ยนแปลงได้ทันที

querySelectorAll() ขั้นตอนการใช้งานกลับมาเป็น NodeList ที่ไม่เปลี่ยนแปลง

childNodes ตัวแปรเรียกค่ากลับมาเป็น NodeList ที่เปลี่ยนแปลงได้ทันที

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

document.querySelector() เป็นคุณสมบัติของ DOM Level 1 (1998)

ทุกบราวเซอร์ทุกๆอันตุลแต่งตัวตามตนเองเพื่อสนับสนุนมัน：

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

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

คู่มือ：

เลือกตัวแทน CSS

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

คู่มือเลือกตัวแทน NodeList HTML DOM

ขั้นตอนการใช้งาน QuerySelector 方法：

ขั้นตอนการใช้งาน querySelector() 方法

ขั้นตอนการใช้งาน querySelectorAll() 方法

ขั้นตอนการใช้งาน GetElement 方法：

ขั้นตอนการใช้งาน getElementById()

ขั้นตอนการใช้งาน getElementsByTagName()

ขั้นตอนการใช้งาน getElementsByClassName()