วิธี querySelector

วิธี querySelector ช่วยให้ได้รับ องค์ประกอบของหน้าตามตัวเลือก CSS ใดก็ได้ กับองค์ประกอบที่ได้รับ คุณสามารถดำเนินการ ต่างๆ ได้: เปลี่ยนข้อความ, แอตทริบิวต์, สไตล์ CSS และอื่นๆ

ไวยากรณ์

javascriptdocument.querySelector(ตัวเลือก);

ตัวอย่าง

ลองรับย่อหน้า #elem และเปลี่ยน ข้อความของมันโดยใช้ textContent:

html<p id="elem">ข้อความ</p>
javascriptlet elem = document.querySelector('#elem');
elem.textContent = '!!!';

ผลลัพธ์ของการทำงานโค้ด:

html<p id="elem">!!!</p>

ตัวอย่าง

ลองรับย่อหน้าที่มีคลาส elem และเปลี่ยนข้อความของมัน:

html<p class="elem">ข้อความ</p>
javascriptlet elem = document.querySelector('.elem');
elem.textContent = '!!!';

ผลลัพธ์ของการทำงานโค้ด:

html<p id="elem">!!!</p>

ดูเพิ่มเติม

  • วิธี getElementById,
    ซึ่งได้รับองค์ประกอบตาม id
  • วิธี querySelectorAll,
    ซึ่งได้รับกลุ่มขององค์ประกอบตามตัวเลือก