HTML DOM querySelector() Method

ตัวอย่าง

เปลี่ยนข้อความขององค์ประกอบลูกคนแรกกับ class = "ตัวอย่าง" ในส่วน <div> องค์ประกอบ:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง

ความหมายและการใช้งาน

querySelector() วิธีการส่งกลับองค์ประกอบลูกคนแรกที่ตรงกับ CSS ระบุ selector(s) ขององค์ประกอบ

หมายเหตุ: querySelector() วิธีการส่งกลับเฉพาะองค์ประกอบแรกเตอร์ที่ตรงกับที่ระบุ ที่จะกลับมาแข่งขันทั้งหมดใช้ querySelectorAll() วิธีการแทน

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ CSS Selectors เยี่ยมชมของเรา CSS Selectors การสอน ของเราและ CSS Selectors อ้างอิง

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

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ

วิธี
querySelector()	4.0	8.0	3.5	3.2	10.0

วากยสัมพันธ์

element .querySelector( CSS selectors )

ค่าพารามิเตอร์

พารามิเตอร์	ชนิด	ลักษณะ
CSS selectors	String	จำเป็นต้องใช้ ระบุหนึ่งหรือมากกว่าหนึ่งตัวเลือก CSS เพื่อให้ตรงกับองค์ประกอบ เหล่านี้จะถูกใช้ในการเลือกองค์ประกอบ HTML บนพื้นฐานของพวกเขา id, เรียนประเภทแอตทริบิวต์ค่าของคุณลักษณะอื่น ๆ สำหรับตัวเลือกหลายแยกแต่ละตัวเลือกด้วยเครื่องหมายจุลภาค องค์ประกอบกลับขึ้นอยู่กับองค์ประกอบที่พบครั้งแรกในเอกสาร (See "More Examples") เคล็ดลับ: สำหรับรายชื่อของทุก CSS Selectors ให้ดูที่เรา CSS Selectors อ้างอิง

รายละเอียดทางเทคนิค

DOM เวอร์ชัน:	ระดับ 1 Selectors ธาตุวัตถุ
กลับค่า:	องค์ประกอบแรกที่ตรงกับ CSS ที่ระบุ selector(s) ถ้าไม่มีแมตช์พบ null จะถูกส่งกลับ พ่นยกเว้น SYNTAX_ERR ถ้าระบุ selector(s) ไม่ถูกต้อง

ตัวอย่างอื่น ๆ

ตัวอย่าง

เปลี่ยนข้อความจากครั้งแรกที่ <p> องค์ประกอบใน <div> องค์ประกอบ:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

ลองตัวเอง»

ตัวอย่าง

เปลี่ยนข้อความจากครั้งแรกที่ <p> องค์ประกอบที่มี class = "ตัวอย่าง" ใน <div> องค์ประกอบ:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

ลองตัวเอง»

ตัวอย่าง

เปลี่ยนข้อความขององค์ประกอบที่มี id = "สาธิต" ใน <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";

ลองตัวเอง»