HTML DOM querySelector () วิธีการ
ความหมายและการใช้งาน
querySelector () วิธีการส่งกลับองค์ประกอบในเอกสารที่ตรงกับการเลือก CSS ที่ระบุ
หมายเหตุ: querySelector () วิธีการส่งกลับเพียงแค่องค์ประกอบแรกที่ตรงกับตัวเลือกที่ระบุ หากคุณต้องการที่จะกลับมาทุกองค์ประกอบใช้ querySelectorAll () วิธีการแทน
เพิ่มเติมตัวเลือก CSS โปรดไปที่ ตัวเลือก CSS กวดวิชา ของเราและ ตัวเลือก CSS อ้างอิงคู่มือ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์ครั้งแรกเพื่อรองรับจำนวนวิธีรุ่น
| ทาง | |||||
|---|---|---|---|---|---|
| querySelector () | 4.0 | 8.0 | 3.5 | 3.1 | 10.0 |
ไวยากรณ์
ค่าพารามิเตอร์
| พารามิเตอร์ | ชนิด | ลักษณะ |
|---|---|---|
| ตัวเลือก CSS | เชือก | ต้อง ระบุหนึ่งหรือมากกว่าหนึ่งองค์ประกอบที่ตรงกันในตัวเลือก CSS คุณสามารถใช้ ID, เรียน, ประเภทของพวกเขาคุณลักษณะค่าแอตทริบิวต์ ฯลฯ เพื่อเลือกองค์ประกอบ สำหรับเตอร์หลายคั่นด้วยเครื่องหมายจุลภาคเพื่อกลับองค์ประกอบที่ตรงกัน เคล็ดลับ: สำหรับข้อมูลเพิ่มเติมตัวเลือก CSS โปรดดู ตัวเลือก CSS อ้างอิงคู่มือ |
รายละเอียดทางเทคนิค
| รุ่น DOM: | ระดับ Selectors วัตถุ 1 เอกสาร |
|---|---|
| ผลตอบแทน: | ตัวเลือก CSS องค์ประกอบแรกที่ตรงกันระบุ ถ้าไม่ได้พบกลับ null ถ้าคุณระบุตัวเลือกที่ไม่ถูกต้องข้อยกเว้น SYNTAX_ERR จะโยน |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ได้รับเอกสารชั้น = "ตัวอย่างเช่น" ครั้งแรก <p> องค์ประกอบ:
ลอง»
ตัวอย่าง
ได้รับเอกสารที่มี "เป้าหมาย" แอตทริบิวต์องค์ประกอบ <a> แรก:
ลอง»
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของส่วนใหญ่ของเตอร์ที่
สมมติว่าคุณเลือกสองเตอร์: <H2> และ <h3> องค์ประกอบ
ครั้งแรก <h2> องค์ประกอบในรหัสต่อไปจะเพิ่มสีพื้นหลังของเอกสาร:
<h3> องค์ประกอบ h3 </ h3>
document.querySelector ( "H2, H3") style.backgroundColor = "สีแดง" .;
ลอง»
แต่ถ้าเอกสารของคุณ <h3> องค์ประกอบ <h2> องค์ประกอบก่อน <h3> องค์ประกอบที่จะถูกกำหนดให้ระบุสีพื้นหลัง
<h2> องค์ประกอบ H2 </ h2>
document.querySelector ( "H2, H3") style.backgroundColor = "สีแดง" .;
ลอง»
หน้าเว็บที่เกี่ยวข้อง
คู่มืออ้างอิง javascript: ธาตุ .querySelector ()