HTML DOM querySelector() Method
❮ วัตถุธาตุตัวอย่าง
เปลี่ยนข้อความขององค์ประกอบลูกแรกด้วย class="example" ใน <div> องค์ประกอบ:
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
วิธีการ querySelector() คืนค่าองค์ประกอบลูกแรกที่ตรงกับ ตัวเลือก CSS ที่ระบุ ขององค์ประกอบ
หมายเหตุ:วิธี querySelector() จะคืนค่าองค์ประกอบแรกที่ตรงกับตัวเลือกที่ระบุเท่านั้น หากต้องการส่งคืนรายการที่ตรงกันทั้งหมด ให้ใช้ เมธอด querySelectorAll()แทน
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก CSS โปรดไปที่ บทช่วย สอนCSS Selectors และการอ้างอิงตัวเลือก CSSของเรา
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
ไวยากรณ์
element.querySelector(CSS selectors)
ค่าพารามิเตอร์
| Parameter | Type | Description |
|---|---|---|
| CSS selectors | String | Required. Specifies one or more CSS selectors to match the element. These are used to select HTML
elements based on their id, classes, types, attributes, values of attributes,
etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
รายละเอียดทางเทคนิค
| รุ่น DOM: | Selectors ระดับ 1 Element Object |
|---|---|
| คืนมูลค่า: | องค์ประกอบแรกที่ตรงกับตัวเลือก CSS ที่ระบุ หากไม่พบรายการที่ตรงกัน ค่า null จะถูกส่งกลับ ส่งข้อยกเว้น SYNTAX_ERR หากตัวเลือกที่ระบุไม่ถูกต้อง |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เปลี่ยนข้อความของ <p> องค์ประกอบแรกใน <div> องค์ประกอบ:
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
ตัวอย่าง
เปลี่ยนข้อความของ <p> องค์ประกอบแรกที่มี class="example" ใน <div> องค์ประกอบ:
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
ตัวอย่าง
เปลี่ยนข้อความขององค์ประกอบด้วย id="demo" ใน <div> องค์ประกอบ:
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
ตัวอย่าง
เพิ่มเส้นขอบสีแดงให้กับองค์ประกอบ <a> แรกที่มีแอตทริบิวต์เป้าหมายภายในองค์ประกอบ <div>:
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นว่าตัวเลือกหลายตัวทำงานอย่างไร
สมมติว่าคุณมีสององค์ประกอบ: <h2> และ <h3> องค์ประกอบ
รหัสต่อไปนี้จะเพิ่มสีพื้นหลังให้กับองค์ประกอบ <h2> แรกใน <div>:
<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
อย่างไรก็ตาม หากองค์ประกอบ <h3> ถูกวางไว้ก่อนองค์ประกอบ <h2> ใน <div> <h3> องค์ประกอบที่จะได้รับสีพื้นหลังสีแดง
<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
หน้าที่เกี่ยวข้อง
บทช่วยสอน CSS: ตัวเลือก CSS
การอ้างอิง CSS: การอ้างอิงตัวเลือก CSS
บทช่วยสอน JavaScript: รายการโหนด JavaScript HTML DOM
การอ้างอิง JavaScript: document.querySelector()
การอ้างอิง JavaScript: องค์ประกอบ .querySelectorAll()
อ้างอิง HTML DOM: document.querySelectorAll()
❮ วัตถุธาตุ