แอตทริบิวต์ data-* (Custom Data Attributes) ใช้สำหรับจัดเก็บข้อมูลส่วนตัว (Private Data) ไว้ในองค์ประกูล HTML เอง โดยไม่ต้องใช้ Global Variables หรือ Hidden Inputs ช่วยให้ JavaScript เข้าถึงข้อมูลได้ง่ายผ่าน dataset API
กฎการตั้งชื่อ
- ขึ้นต้นด้วย
data-เสมอ - ชื่อหลัง
data-ต้องเป็น ตัวพิมพ์เล็ก (lowercase) เท่านั้น - คั่นคำด้วย Hyphen (-) เช่น
data-user-id,data-max-count - ใน JavaScript เข้าถึงแบบ CamelCase:
dataset.userId,dataset.maxCount
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<script>
function display(element) {
// เข้าถึงผ่าน dataset (แปลง hyphen-case เป็น camelCase อัตโนมัติ)
const rankType = element.dataset.rankType; // data-rank-type
const points = element.dataset.points; // data-points
const isActive = element.dataset.active === 'true'; // Boolean
alert(`อันดับ: ${element.textContent}\nประเภท: ${rankType}\nคะแนน: ${points}\nActive: ${isActive}`);
}
</script>
</head>
<body>
<h1>อันดับและคะแนน</h1>
<p>คลิกที่อันดับเพื่อดูรายละเอียด:</p>
<ul>
<li onclick="display(this)" id="first" data-rank-type="gold" data-points="1000" data-active="true">อันดับ 1</li>
<li onclick="display(this)" id="second" data-rank-type="silver" data-points="800" data-active="true">อันดับ 2</li>
<li onclick="display(this)" id="third" data-rank-type="bronze" data-points="600" data-active="false">อันดับ 3</li>
</ul>
</body>
</html>Dataset API (JavaScript)
const el = document.getElementById('myElement');
// อ่านค่า (Hyphen-case → CamelCase)
el.dataset.userId; // data-user-id
el.dataset.maxCount; // data-max-count
el.dataset.apiEndpoint; // data-api-endpoint
// เขียนค่า (CamelCase → Hyphen-case)
el.dataset.newValue = 'hello'; // สร้าง data-new-value="hello"
el.dataset.userId = '12345'; // อัปเดต data-user-id="12345"
// ลบค่า
delete el.dataset.userId; // ลบ data-user-id
// ตรวจสอบมีหรือไม่
'userId' in el.dataset; // true/false
// ได้ Object ทั้งหมด
console.log(el.dataset); // DOMStringMap { userId: "12345", ... }กรณีการใช้งานทั่วไป
- Configuration สำหรับ Widgets/Components (
data-api-url,data-theme) - State ของ UI Components (
data-open,data-selected) - Parameter สำหรับ Event Handlers (
data-id,data-action) - Analytics/Tracking Data (
data-track-event,data-category) - CSS Selectors:
[data-active="true"],[data-user-id]
⚠️ ข้อควรระวัง
- ข้อมูลมองเห็นได้ใน DevTools/Source - อย่าเก็บข้อมูลลับ (Tokens, PII)
- ขนาดใหญ่เกินไปจะทำให้ DOM ใหญ่ - ใช้
localStorageหรือ JS Variables แทน - Boolean ใช้ string
"true"/"false"(dataset จะคืน String เสมอ)
