การเปลี่ยน DOM

ในฐานะ designer คุณคิดเป็น layer และ state อยู่แล้ว — ปุ่มในสถานะปกติ สถานะ hover สถานะ active JavaScript ช่วยให้คุณสลับระหว่างสถานะเหล่านั้นได้แบบ live ใน browser ส่วนที่เชื่อมระหว่างโค้ดกับสิ่งที่ผู้ใช้มองเห็นเรียกว่า DOM

DOM คืออะไร?

DOM (Document Object Model) คือโมเดลของหน้าเว็บที่อยู่ใน memory ซึ่ง JavaScript อ่านและแก้ไขได้ ลองนึกภาพว่าเป็น layer tree ใน Figma: ทุก element บนหน้าเว็บมี node ที่สอดคล้องกันใน tree และ JavaScript สามารถอ่านหรือแก้ไข node ใดก็ได้แบบ real time

เมื่อ JavaScript เปลี่ยน DOM browser จะสะท้อนการเปลี่ยนแปลงนั้นบนหน้าจอทันที — ไม่จำเป็นต้อง reload หน้าเว็บ

เทคนิคสองอย่างที่ควรรู้ตั้งแต่เนิ่นๆ

1. เปลี่ยนข้อความด้วย `.textContent`

ทุก element มี property .textContent ที่เก็บข้อความที่มองเห็นอยู่ภายใน การกำหนดค่า string ใหม่จะแทนที่ข้อความนั้นทันที:

var heading = document.querySelector('h1');
heading.textContent = 'Hello, world!';

2. Toggle CSS class ด้วย `.classList.toggle`

Element ยังมี object .classList ที่ให้คุณเพิ่ม ลบ หรือ toggle CSS class ได้ .classList.toggle('class-name') ทำงานเหมือนสวิตช์ไฟ:

ถ้า class ไม่มีอยู่ จะเพิ่มเข้าไป
ถ้า class มีอยู่แล้ว จะลบออก

สิ่งนี้ตรงกับการสลับ variant state ใน Figma โดยตรง — element แค่สลับระหว่างสองสไตล์ภาพที่กำหนดไว้ใน CSS ของคุณ

var card = document.querySelector('.card');
card.classList.toggle('highlighted');

ลองทดสอบดูสด

demo ด้านล่างมี card และปุ่ม แต่ละครั้งที่คลิกจะ toggle CSS class highlighted บน card และอัปเดต label ของปุ่มให้ตรงกับสถานะปัจจุบัน

<div id="card" class="card">
  <h3>My Design Card</h3>
  <p>Click the button to highlight this card.</p>
</div>
<button id="toggleBtn">Highlight</button>

โค้ดทำงานอย่างไร

document.querySelector('#card') ค้นหา card element ด้วย id และเก็บ reference ไว้ในตัวแปร card
document.querySelector('#toggleBtn') ทำแบบเดียวกันสำหรับปุ่ม
btn.addEventListener('click', function() { ... }) บอก browser ให้รัน function ทุกครั้งที่มีการคลิกปุ่ม
ภายใน function, card.classList.toggle('highlighted') จะ flip class เปิดหรือปิด
card.classList.contains('highlighted') ตรวจสอบสถานะปัจจุบันเพื่อให้ label ของปุ่มซิงค์กันผ่าน .textContent

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

design ทุก state (loading, error, success) แยกกันโดยไม่คิดว่า developer ต้อง “เปลี่ยน” DOM เดิมให้กลายเป็น state ใหม่ (ไม่ใช่โหลดหน้าใหม่ทั้งหมด)
ลืมออกแบบ transition ระหว่าง state

มุมมองของ developer

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

Designer เห็น “3 หน้าจอแยกกัน” แต่ developer เห็นหน้าจอเดียวที่ต้อง “แก้ไข” content/class ทีละส่วนด้วย JavaScript เพื่อเปลี่ยนจาก state หนึ่งไปอีก state

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

Todo list ของ Notion ไม่ reload หน้าเวลาติ๊กเสร็จ แต่ใช้ JavaScript แก้ DOM เฉพาะส่วนนั้น (ขีดทับ + เปลี่ยนสี) ทันที