HTML DOM เอกสารแบบสอบถามตัวเลือก ()
ตัวอย่าง
รับ <p> องค์ประกอบแรก:
document.querySelector("p");
รับองค์ประกอบแรกด้วย class="example":
document.querySelector(".example");
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
querySelector()เมธอดส่งคืนองค์ประกอบแรกที่ตรงกับตัวเลือก CSS
หากต้องการส่งคืน การแข่งขัน ทั้งหมด (ไม่ใช่เฉพาะรายการแรก) ให้ใช้ปุ่มquerySelectorAll()แทน
ทั้งสองและquerySelector()ส่งquerySelectorAll()คืนNodeList
ทั้งคู่querySelector()และquerySelectorAll()โยนข้อยกเว้น SYNTAX_ERR หากตัวเลือกไม่ถูกต้อง
บทช่วยสอน:
บทช่วยสอนรายการโหนด JavaScript
วิธีการ QuerySelector:
Element querySelector() Method
Element querySelectorAll() Method
เอกสาร querySelectorAll() Method
วิธีการ GetElement:
เอกสาร getElementById() Method
HTML DOM NodeList / HTMLCollection
ความแตกต่างระหว่าง HTMLCollection และ NodeList
NodeListและHTMLCollection เป็นทั้งคอลเลกชัน (รายการ) ที่ เหมือนอาร์เรย์ของโหนด (องค์ประกอบ) ที่ดึงมาจากเอกสาร โหนดสามารถเข้าถึงได้โดยหมายเลขดัชนี ดัชนีเริ่มต้นที่ 0
อ อบเจ็กต์ทั้งสองมี คุณสมบัติ ความยาวที่ส่งคืนจำนวนองค์ประกอบในรายการ
HTMLCollection คือคอลเล็กชันแบบสด : หากคุณเพิ่มองค์ประกอบ <li> ในรายการใน DOM รายการใน HTMLCollection จะเปลี่ยนไปด้วย
NodeList คือคอลเล็กชันแบบคงที่หากคุณเพิ่มองค์ประกอบ <li> ในรายการใน DOM รายการใน NodeList จะไม่เปลี่ยนแปลง
และ เมธอดจะ getElementsByClassName()คืนgetElementsByTagName()
ค่า HTMLCollection
และ เมธอด querySelector()จะquerySelectorAll()
ส่งคืน NodeList
ไวยากรณ์
document.querySelector(CSS selectors)
พารามิเตอร์
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
คืนมูลค่า
| พิมพ์ | คำอธิบาย |
| วัตถุ | NodeListที่มีองค์ประกอบแรกที่ตรงกับตัวเลือก CSS หากไม่พบรายการที่ตรงกันจะ nullถูกส่งคืน |
ตัวอย่างเพิ่มเติม
รับ <p> องค์ประกอบแรกใน class="example":
document.querySelector("p.example");
เปลี่ยนข้อความขององค์ประกอบด้วย id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
เลือกองค์ประกอบ <p> แรกที่มีพาเรนต์คือ <div> องค์ประกอบ
document.querySelector("div > p");
เลือกองค์ประกอบ <a> แรกที่มีแอตทริบิวต์ "เป้าหมาย":
document.querySelector("a[target]");
เลือก <h3> แรกหรือ <h4> แรก:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
เลือก <h3> แรกหรือ <h4> แรก:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
รองรับเบราว์เซอร์
document.querySelector()เป็นคุณลักษณะ DOM ระดับ 1 (1998)
ได้รับการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์ทั้งหมด:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |