การเลือก Elements

ลองนึกถึงหน้าเว็บเหมือน Figma file ทุก heading, button, รูปภาพ และย่อหน้าล้วนเป็น layer ที่วางอยู่บน canvas ก่อนที่จะ style หรือ animate อะไรใน Figma ได้ คุณต้องคลิกเลือก layer นั้นก่อน JavaScript ทำงานในแบบเดียวกันทุกประการ — ก่อนที่จะเปลี่ยนแปลงสิ่งใดบนหน้า คุณต้อง เลือก element นั้น ก่อน

`document` คืออะไร?

document คือชื่อที่ JavaScript ใช้เรียกหน้าเว็บทั้งหมด แทนไฟล์ HTML ทั้งหมดที่ browser โหลดขึ้นมา ทุกครั้งที่ต้องการเข้าถึงและโต้ตอบกับหน้าเว็บ คุณจะเริ่มต้นจาก document เสมอ — เหมือน canvas ใน Figma ที่ทุกอย่างอยู่ข้างใน

การจับ element ด้วย `querySelector`

document.querySelector() คือเครื่องมือหลักสำหรับการเลือก element คุณส่ง CSS selector เข้าไป — แบบเดียวกับที่คุณเขียนใน stylesheet อยู่แล้ว — แล้วจะได้ element แรกที่ตรงกัน ที่หามาได้

document.querySelector('.card')   // เลือก element แรกที่มี class "card"
document.querySelector('#title')  // เลือก element ที่มี id "title"
document.querySelector('button')  // เลือก <button> tag แรก

ถ้าคุณรู้วิธีเขียน CSS selector แล้ว คุณก็รู้วิธีเลือก element ใน JavaScript แล้วด้วย syntax เหมือนกันทุกอย่าง

การอ่านและเปลี่ยนข้อความ

เมื่อได้ reference ของ element มาแล้ว คุณสามารถอ่านหรือเปลี่ยนข้อความข้างในได้ด้วย property .textContent

var heading = document.querySelector('h1');

// อ่านข้อความปัจจุบัน
var currentText = heading.textContent;

// เปลี่ยนข้อความ
heading.textContent = 'New heading text';

การกำหนดค่าใหม่ให้ .textContent จะอัปเดตสิ่งที่ผู้เยี่ยมชมเห็นทันที — ไม่ต้อง reload หน้าเลย

<h2 id="headline">Original Headline</h2>
<button id="changeBtn">Change the headline</button>

ตัวอย่างข้างบนเลือก button #changeBtn และ heading #headline เมื่อกด button script จะอัปเดตข้อความของ heading ทุกอย่างพึ่งพา querySelector ในการเลือกก่อนเสมอ — เหมือนกับการคลิกเลือก layer ใน layers panel ของ Figma แล้วค่อยแก้ข้อความใน properties panel

ตารางอ้างอิง Selector

สิ่งที่อยากเลือก	Syntax ของ selector
Element ที่มี class	`.className`
Element ที่มี id	`#idName`
ประเภท tag	`button`, `h2`, `p`
Element ที่ซ้อนอยู่ข้างใน	`.card h2`

CSS selector ที่ถูกต้องทุกรูปแบบใช้ได้ใน querySelector ถ้าเลือกเป้าหมายได้ใน stylesheet ก็จับได้ใน JavaScript เช่นกัน

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ขอให้ developer “ทำให้ทุกปุ่มมีสีนี้” โดยไม่รู้ว่า developer ต้อง “เลือก” element เหล่านั้นก่อนด้วย selector ที่ตรงกับ class/id ที่ตั้งไว้
ตั้งชื่อ layer ใน Figma ไม่ตรงกับชื่อ class ที่ developer จะใช้เลือก

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “ทุกปุ่มในหน้านี้” แต่ developer ต้องเขียน code ที่ “หา” element เหล่านั้นก่อนจะแก้ไขหรือเพิ่ม interactivity ได้ (คล้าย “Select all with same style” ใน Figma)

💡 ตัวอย่างจากของจริง

ฟีเจอร์ “Select all with same properties” ใน Figma ทำงานคล้าย querySelectorAll ใน JavaScript — หา element ทั้งหมดที่ตรงเงื่อนไขเดียวกันมาแก้พร้อมกัน