วิธีค้นหา DOM Element querySelector()

คำนิยามและวิธีใช้

querySelector() วิธีนี้กลับมาเฉพาะลูกองค์ประกอบแรกที่ตรงกับตัวเลือก CSS ที่กำหนดขององค์ประกอบ

注意：

querySelector() วิธีนี้กลับมาเฉพาะองค์ประกอบแรกที่ตรงกับตัวเลือกที่กำหนด ถ้าต้องการกลับมาทั้งหมด ใช้ querySelectorAll() วิธี.

ดูเพิ่มเติมที่:

คู่มืออ้างอิง:

property classList

property className

querySelectorAll() วิธี

getElementsByTagName() วิธี

getElementsByClassName() วิธี

อนุประเภท HTML DOM Style

คู่มือ:

การใช้งาน CSS

CSS Selector

คู่มือ CSS Selector

ตัวอย่าง

ตัวอย่าง 1

แก้ไขข้อความของลูกองค์ประกอบแรกในองค์ประกอบ <div> ที่มี class="example":

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

ทดสอบด้วยตัวเอง

ตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า

การใช้งาน

element.querySelector(CSSselectors)

ตัวอย่าง

ตัวอย่าง รายละเอียด
CSSselectors

สำคัญ

CSS selector ใช้เลือกองค์ประกอบ HTML ตาม id, class, ชนิด, 属性, ค่า属性 และอื่นๆ

สำหรับตัวเลือกหลายตัว ให้แยกด้วยคำว่า comma

องค์ประกอบที่กลับมาขึ้นอยู่กับองค์ประกอบแรกที่หาได้ในเอกสาร (อ่านเพิ่มเติมใน "ตัวอย่างเพิ่มเติม" ด้านล่าง)

คำเตือน:สำหรับรายการตัวเลือก CSS ที่เต็ม โปรดดูที่ คู่มือ CSS Selector.

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

ค่าที่กลับมา:

ตรงกับองค์ประกอบแรกที่ตรงกับตัวเลือก CSS。

ถ้าไม่มีสิ่งที่ตรงกับตัวเลือก จะกลับ null。

ถ้าตัวเลือกเลือกที่กำหนดไม่มีประสิทธิภาพ จะทิ้งข้อผิดพลาด SYNTAX_ERR。
DOM รุ่น: Selectors Level 1 Element Object

ตัวอย่างเพิ่มเติม

ตัวอย่าง 2

แก้ไขข้อความขององค์ประกอบ <p> แรกในองค์ประกอบ <div>:

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

ทดสอบด้วยตัวเอง

ตัวอย่าง 3

แก้ไขข้อความขององค์ประกอบ <p> แรกในองค์ประกอบ <div> ที่มี class="example":

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

ทดสอบด้วยตัวเอง

ตัวอย่าง 4

แก้ไขข้อความขององค์ประกอบ <div> ที่มี id="demo":

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

ทดสอบด้วยตัวเอง

ตัวอย่าง 5

เพิ่มขอบเขตแดงกว้าง 10 พิกเซล ให้กับ <a> แรกที่มีคุณสมบัติ target ใน <div>

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

ทดสอบด้วยตัวเอง

ตัวอย่าง 6

ตัวอย่างนี้แสดงว่าเลือกเล็กน้อยหลายตัวทำงานได้อย่างไร

ตั้งแต่ที่คุณมีสององค์ประกอบ <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";

ทดสอบด้วยตัวเอง

ตัวอย่าง 7

แต่ หาก <h3> อยู่ใน <div> ก่อน <h2> แล้ว <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";

ทดสอบด้วยตัวเอง

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางบ่งชี้ว่าอุปกรณ์ที่สนับสนุนการใช้งานเมื่อไรของวิธีนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

เพจที่เกี่ยวข้อง

ตัวเรียน CSS:CSS Selector

คู่มือ CSS:คู่มือ CSS Selector

ตัวเรียน JavaScript:JavaScript HTML DOM Node List

คู่มือ JavaScript:document.querySelector()

คู่มือ JavaScript:element.querySelectorAll()

คู่มือ HTML DOM:document.querySelectorAll()