querySelector JavaScript: คู่มือการใช้งาน

getElementById getElementByClass คุณอาจเคยได้ยินฟังก์ชันเหล่านี้มาก่อน ทั้งคู่ช่วยเลือกองค์ประกอบเฉพาะใน JavaScript

เมื่อเลือกองค์ประกอบแล้ว คุณสามารถเปลี่ยนเนื้อหา แก้ไขสถานะ หรือทำให้มันหายไปได้

มีอีกฟังก์ชันหนึ่งสำหรับเลือก item บน webpage ใน JavaScript: querySelector ฟังก์ชันนี้มีพี่น้องชื่อ querySelectorAll ซึ่งคืนค่าทุกองค์ประกอบที่ตรงกับ query เฉพาะ

ในคู่มือนี้ เราจะพูดถึงวิธีใช้ querySelector และ querySelectorAll methods พร้อมตัวอย่างการทำงานจริง

querySelector คืออะไร?

querySelector เป็นฟังก์ชันที่คืนค่าองค์ประกอบที่ตรงกับ CSS query สังเกตว่า querySelector method คืนค่าแค่ instance แรกของ selector ตอนใช้ querySelector คุณสามารถระบุ CSS selector ใดก็ได้ ตัวอย่างเช่น ดึง element ที่มี ID เฉพาะ หรือ element โดย tag name

ใช้ฟังก์ชันได้แบบนี้:

var elementName = document.querySelector('#thisElement');

เราระบุ CSS selectors ใน quotation marks นอกจากนี้ ยังสามารถใช้ method เลือก element ภายใน element อื่นได้:

var parentElement = document.querySelector('main'); var childElement = document.querySelector('#childElement');

จะคืนค่า element ที่มี ID #childElement ซึ่งอยู่ภายใน <main> tag ใน HTML file

querySelectorAll ทำงานคล้ายกัน แตกต่างคือคืนค่าทุก matches ที่ query selector หาเจอ แทนที่จะเป็นแค่ตัวแรก:

var allParagraphs = document.querySelectorAll('p');

จะคืนค่าลิสต์ของ <p> tags ทั้งหมดใน HTML page

ตัวอย่าง selectors ที่ใช้กับฟังก์ชันนี้ได้:

• p: เลือก <p> tags ทั้งหมดในหน้า
• #name_field: เลือก element ที่มี id "name_field"
• .list: เลือกทุก elements ที่มี class name "list"
• div > p: เลือก <p> elements ที่อยู่ใน <div> element

คุณสามารถระบุ multiple selectors ด้วย querySelector และ querySelectorAll อ่านเพิ่มเติมได้จาก CSS and HTML attribute selectors guide

ถ้าไม่เจอ matches จะคืนค่า null

วิธีใช้ Query Selector

มาสร้างเว็บแอปพลิเคชันง่ายๆ เพื่อแสดงการทำงานของ querySelector method เราจะสร้างหน้าเว็บแสดงข้อเท็จจริงเกี่ยว HTML ใช้ querySelector เพิ่มปุ่มที่เมื่อคลิกจะเปิด "dark mode"

ตั้งค่า Front End

เริ่มต้นด้วยการตั้งค่า front-end:

<!DOCTYPE html> <html> <head> <title>HTML Facts!</title> <link rel="stylesheet" href="./facts.css"> </head> <body> <div class="mainBox"> <h1 class="text">HTML Facts!</h1> <p class="text">Did you know that HTML is actually based on another markup language, SGML, or Standard Generalized Markup Language?</p> <button type="button">Enable dark mode</button> </div> <script src="./facts.js"></script> </body> </html>

เราสร้าง HTML webpage แสดงข้อเท็จจริง HTML ตอนนี้หน้าตาแบบนี้:

หน้าของเราให้ข้อเท็จจริง HTML แต่ขาดสองฟีเจอร์สำคัญ: styles และ dark mode button ที่ทำงานจริง มาเพิ่ม styles ใน facts.css:

.mainBox { margin: auto; width: 50%; text-align: center; background: hotpink; padding: 5%; } body { background: lightblue; } button { padding: 10px; background: lightgreen; border-radius: 10px; border: none; }

Styles นี้ทำให้ไซต์ดูสวยขึ้น:

Front-end เสร็จแล้ว ต่อไปมาทำ dark mode ด้วย JavaScript

เพิ่ม Dark Mode ด้วย JavaScript

Dark mode function ควรมีสองฟีเจอร์:

• Heading และ paragraph ในกล่องเปลี่ยนเป็นสีขาว
• พื้นหลังสีฟ้าของไซต์เปลี่ยนเป็นสีดำ

เริ่มต้นด้วยการเลือก DOM elements ที่ต้องการ target: heading, paragraph, และ main body ใน facts.js:

const heading = document.querySelector("h1"); const paragraph = document.querySelector("p"); const body = document.querySelector("body");

โค้ดนี้คืนค่า element แรกใน document ที่มี tag <h1>, <p>, และ <body> ต่อไปสร้างฟังก์ชันเปลี่ยนสี text และ body tag จะเปลี่ยน heading และ paragraph เป็นสีขาว และ background เป็นสีดำ

function enableDarkMode() { heading.setAttribute("style", "color: white;"); paragraph.setAttribute("style", "color: white;"); body.setAttribute("style", "background-color: black;"); }

เกือบเสร็จแล้ว ขั้นตอนต่อไปคือ setup event listener listener นี้จะฟังเมื่อ user คลิกปุ่ม เมื่อคลิก dark mode จะเปิด:

document.querySelector("button").addEventListener("click", enableDarkMode);

ลองดูเมื่อคลิกปุ่ม:

ไซต์ของเราเปลี่ยนเป็น dark mode สำเร็จ!

สรุป (และ Challenge)

คุณจะสังเกตว่าโค้ดของเราอนุญาตแค่ enable dark mode เท่านั้น นี่คือ challenge ให้คุณ: เขียนโค้ดให้ user สามารถ disable dark mode ได้

querySelector method เลือก HTML elements จาก CSS selector query คืนค่า instance แรกของ match คุณสามารถใช้ querySelectorAll ดึงลิสต์ทุก elements ที่ตรงกับ selector ที่ระบุ

ตอนนี้คุณพร้อมใช้ querySelector method แบบ JavaScript pro แล้ว!