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

data-* attributes ช่วยให้คุณเก็บข้อมูลแบบกำหนดเอง ส่วนตัวบนองค์ประกอบ HTML ใด ๆ ได้ พวกมันเป็นวิธีมาตรฐานในการแนบข้อมูลเมตาดาต้าลงใน DOM ที่ JavaScript สามารถอ่านได้ โดยไม่ต้องใช้คุณลักษณะหรือคลาสที่ไม่ใช่มาตรฐาน

<button
  data-id="42"
  data-user-role="admin"
  data-is-active="true"
>Edit</button>

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

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

button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */

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

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 ไม่ถูกต้อง

อย่าเก็บข้อมูลขนาดใหญ่หรือข้อมูลที่ละเอียดอ่อนที่นั่น มันจะปรากฎในมาร์กอัป