data-* attributes คืออะไร และคุณจะอ่านอย่างไร?

Question

IT Interview Practice · Accepted Answer

**`data-*` attributes** ช่วยให้คุณเก็บข้อมูลแบบกำหนดเอง ส่วนตัวบนองค์ประกอบ HTML ใด ๆ ได้ พวกมันเป็นวิธีมาตรฐานในการแนบข้อมูลเมตาดาต้าลงใน DOM ที่ JavaScript สามารถอ่านได้ โดยไม่ต้องใช้คุณลักษณะหรือคลาสที่ไม่ใช่มาตรฐาน ```html ``` ## การอ่านใน JavaScript ผ่าน `dataset` ```js const btn = document.querySelector("button"); btn.dataset.id; // "42" btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase btn.dataset.isActive; // "true" ← always a STRING // writing updates the attribute too btn.dataset.id = "99"; // sets data-id="99" in the DOM ``` สองกฎสำคัญ: `data-user-role` ถูกเข้าถึงเป็น `dataset.userRole` (เครื่องหมายขีดกลางกลายเป็น camelCase) และ **ทุกค่าเป็นสตริง** — แปลงตามต้องการ (`Number(btn.dataset.id)`, `btn.dataset.isActive === "true"`). ## การอ่าน CSS ```css button[data-is-active="true"] { font-weight: bold; } button::after { content: attr(data-id); } /* display the value */ ``` ## รูปแบบทั่วไป: event delegation ```js list.addEventListener("click", (e) => { const id = e.target.dataset.id; // know which item was clicked if (id) deleteItem(id); }); ``` การเก็บ id บนองค์ประกอบแต่ละองค์ประกอบหมายความว่าผู้ฟังคนหนึ่งบนองค์ประกอบหลักสามารถจัดการกับรายการทั้งหมด ## เหตุใดจึงมีความสำคัญ `data-*` เป็นวิธีที่สะอาดและเป็นไปตามมาตรฐานในการส่งข้อมูลจากเซิร์ฟเวอร์เข้าไป DOM สำหรับ JS ฝั่งไคลเอนต์ (โดยไม่มีการเรียก API เพิ่มเติม) เพื่อตั้งค่าการมอบหมายเหตุการณ์ และเพื่อเลี่ยงสถานะ CSS — โดยไม่ต้องคิดค้นคุณลักษณะที่ไม่ใช่มาตรฐานซึ่งจะทำให้ HTML ไม่ถูกต้อง อย่าเก็บข้อมูลขนาดใหญ่หรือข้อมูลที่ละเอียดอ่อนที่นั่น มันจะปรากฎในมาร์กอัป

การอ่านใน JavaScript ผ่าน dataset

การอ่าน CSS

รูปแบบทั่วไป: event delegation

เหตุใดจึงมีความสำคัญ

คำถามที่เกี่ยวข้อง

การอ่านใน JavaScript ผ่าน `dataset`