ตัวอย่าง
รับองค์ประกอบแรกในเอกสารที่มี class = "ตัวอย่าง":
document.querySelector(".example"); ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
querySelector() วิธีการส่งกลับองค์ประกอบแรกที่ตรงกับ CSS ระบุ selector(s) ในเอกสาร
หมายเหตุ: querySelector() วิธีการส่งกลับเฉพาะองค์ประกอบแรกเตอร์ที่ตรงกับที่ระบุ ที่จะกลับมาแข่งขันทั้งหมดใช้ querySelectorAll() วิธีการแทน
ถ้าเลือกตรงกับรหัสในเอกสารที่ใช้หลายครั้ง (หมายเหตุว่า "id" ต้องไม่ซ้ำกันภายในหน้าเว็บและไม่ควรใช้มากกว่าหนึ่งครั้ง) ก็จะส่งกลับองค์ประกอบแรกที่ตรงกัน
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ CSS Selectors เยี่ยมชมของเรา CSS Selectors การสอน ของเราและ CSS Selectors อ้างอิง
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
วากยสัมพันธ์
document.querySelector( CSS selectors )ค่าพารามิเตอร์
| พารามิเตอร์ | ชนิด | ลักษณะ |
|---|---|---|
| CSS selectors | String | จำเป็นต้องใช้ ระบุหนึ่งหรือมากกว่าหนึ่งตัวเลือก CSS เพื่อให้ตรงกับองค์ประกอบ เหล่านี้จะถูกใช้ในการเลือกองค์ประกอบ HTML บนพื้นฐานของพวกเขา id, เรียนประเภทแอตทริบิวต์ค่าของคุณลักษณะอื่น ๆ สำหรับตัวเลือกหลายแยกแต่ละตัวเลือกด้วยเครื่องหมายจุลภาค องค์ประกอบกลับขึ้นอยู่กับองค์ประกอบที่พบครั้งแรกในเอกสาร (See "More Examples") เคล็ดลับ: สำหรับรายชื่อของทุก CSS Selectors ให้ดูที่เรา CSS Selectors อ้างอิง |
รายละเอียดทางเทคนิค
| DOM เวอร์ชัน: | ระดับ Selectors วัตถุ 1 เอกสาร |
|---|---|
| กลับค่า: | วัตถุ NodeList คิดเป็นองค์ประกอบแรกที่ตรงกับ CSS ที่ระบุ selector(s) ถ้าไม่มีแมตช์พบ null จะถูกส่งกลับ พ่นยกเว้น SYNTAX_ERR ถ้าระบุ selector(s) ไม่ถูกต้อง |
ตัวอย่างอื่น ๆ
ตัวอย่าง
รับแรก <p> องค์ประกอบในเอกสารที่มี class = "ตัวอย่าง":
document.querySelector("p.example"); ลองตัวเอง» ตัวอย่าง
เปลี่ยนข้อความขององค์ประกอบที่มี id = "สาธิต":
document.querySelector("#demo").innerHTML = "Hello World!";
ลองตัวเอง» ตัวอย่าง
รับแรก <p> องค์ประกอบในเอกสารที่ผู้ปกครองเป็น <div> องค์ประกอบ
document.querySelector("div > p"); ลองตัวเอง» ตัวอย่าง
รับแรก <a> องค์ประกอบในเอกสารที่มี "target" แอตทริบิวต์:
document.querySelector("a[target]"); ลองตัวเอง» ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการทำงานหลายตัวเลือก
สมมติว่าคุณมีสององค์ประกอบที่: <h2> และ <h3> องค์ประกอบ
รหัสต่อไปนี้จะเพิ่มสีพื้นหลังแรก <h2> องค์ประกอบในเอกสาร:
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2,
h3").style.backgroundColor = "red"; ลองตัวเอง» แต่ถ้า <h3> องค์ประกอบที่ถูกวางไว้ก่อน <h2> องค์ประกอบในเอกสาร <h3> องค์ประกอบหนึ่งที่จะได้รับสีพื้นหลังสีแดง
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2,
h3").style.backgroundColor = "red"; ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
สอน CSS: CSS Selectors
อ้างอิง CSS: CSS Selectors อ้างอิง
กวดวิชา JavaScript: รายการ JavaScript HTML DOM Node
อ้างอิง JavaScript: องค์ประกอบ querySelector()
HTML DOM อ้างอิง: เอกสาร querySelectorAll()
อ้างอิง JavaScript: องค์ประกอบ querySelectorAll()