แอตทริบิวต์ data-* ใน HTML: เก็บข้อมูลกำหนดเองบนอิลิเมนต์

ไวยากรณ์ (Syntax)

<element data-attribute-name="value">

กติกาการตั้งชื่อ

• ขึ้นต้นด้วย data- เสมอ
• ตามด้วยชื่อที่มี **ตัวพิมพ์เล็ก (lowercase) เท่านั้น**
• คั่นคำด้วย hyphen (-) เช่น data-user-id, data-tutorial-type
• ต้องมีอย่างน้อย 1 ตัวอักษรหลัง data-
• ไม่รองรับ Unicode ในชื่อแอตทริบิวต์ (ใช้ ASCII เท่านั้น)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <script>
    function showInfo(element) {
      var type = element.getAttribute("data-tutorial-type");
      // หรือใช้ dataset API (แนะนำ)
      // var type = element.dataset.tutorialType; // camelCase
      alert(element.innerHTML + " = " + type + ".");
    }
  </script>
</head>
<body>
  <h1>บทเรียน</h1>
  <h2 onclick="showInfo(this)" id="java" data-tutorial-type="programming language">Java</h2>
  <h2 onclick="showInfo(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
  <h2 onclick="showInfo(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html>

ผลลัพธ์

คลิกที่หัวข้อ "Java" → Alert: "Java = programming language."
คลิกที่ "jQuery" → Alert: "jQuery = scripting language."
คลิกที่ "MySQL" → Alert: "MySQL = database."

HTML5 Dataset API (แนะนำ)

// HTML: <div id="user" data-user-id="123" data-user-name="Somchai" data-is-admin="true">

var el = document.getElementById("user");

// อ่านค่า (camelCase)
console.log(el.dataset.userId);      // "123" (String)
console.log(el.dataset.userName);    // "Somchai"
console.log(el.dataset.isAdmin);     // "true" (String! ไม่ใช่ Boolean)

// เขียนค่า
el.dataset.newData = "hello";      // เพิ่ม data-new-data="hello"
el.dataset.userId = "456";         // เปลี่ยนค่า

// ลบค่า
delete el.dataset.userName;        // ลบ data-user-name

// ตรวจสอบว่ามีหรือไม่
"userId" in el.dataset; // true

ข้อดีของ data-* และ dataset

• Valid HTML5 (ไม่ใช่ Invalid Attribute)
• แยกข้อมูลออกจาก Class/ID (Semantic)
• เข้าถึงง่ายด้วย element.dataset.propertyName (camelCase อัตโนมัติ)
• CSS Selector ได้: [data-user-id="123"]
• Private data สำหรับ JavaScript Module/Component

ข้อควรระวัง

• ค่าใน dataset **เป็น String เสมอ** ต้องแปลงเอง (parseInt, JSON.parse)
• ชื่อแอตทริบิวต์ hyphen-case → dataset camelCase (data-user-id → dataset.userId)
• ไม่ควรเก็บข้อมูล Sensitivity (Password, Token) ใน DOM
• Performance: dataset ช้ากว่า getAttribute เล็กน้อย (แต่สะดวกกว่า)