data-* Attributes Deep Dive
data-* attributes (jo pehle Basics mein bhi dekha) real-world applications mein bahut heavily use hote hain — state store karna (data-status="active"), configuration pass karna (data-max-items="5"), ya elements ko identify karna (data-product-id="123") — JavaScript ke saath tight integration ke liye.
JavaScript se .dataset property se access hote hain — dash-case (data-user-id) automatically camelCase (dataset.userId) ban jaata hai.
<div class="product"
data-product-id="42"
data-price="999"
data-in-stock="true">
Wireless Mouse
</div>
<script>
const product = document.querySelector(".product");
console.log(product.dataset.productId); // "42"
console.log(product.dataset.price); // "999" (string, number nahi!)
console.log(product.dataset.inStock); // "true" (string, boolean nahi!)
</script>- data-* = custom HTML attributes, JavaScript integration ke liye
- dash-case HTML mein, camelCase JavaScript mein (.dataset)
- Saare values strings hain — explicit conversion zaroori hai numbers/booleans ke liye
data-* attributes event delegation pattern mein bahut useful hain — ek hi event listener parent par lagakar, data attribute se pata karna kaunsa specific child clicked hua, individual listeners ki jagah.
<ul id="productList">
<li data-id="1">Product A</li>
<li data-id="2">Product B</li>
<li data-id="3">Product C</li>
</ul>
<script>
document.getElementById("productList").addEventListener("click", (e) => {
if (e.target.tagName === "LI") {
console.log("Clicked product:", e.target.dataset.id);
}
});
// Ek hi listener, saare li items handle karta hai
</script>data- prefix ke bina custom attributes (jaise <div myattr="x">) technically HTML validator errors dete hain — HTML spec sirf data- prefixed custom attributes ko officially valid maanta hai, isliye ye convention follow karna zaroori hai.
<!-- INVALID (validator error): -->
<!-- <div userinfo="admin"> -->
<!-- VALID: -->
<div data-userinfo="admin">