data-* विशेषताएं आपको किसी भी HTML तत्व पर कस्टम, निजी डेटा संग्रहीत करने देती हैं। ये DOM के साथ मेटाडेटा जोड़ने का एक मानक तरीका है जो JavaScript पढ़ सकता है, बिना गैर-मानक विशेषताओं या कक्षाओं का दुरुपयोग किए।
html
Edit
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")।
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
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 को अमान्य बना देगा।
हालांकि, वहां बड़े या संवेदनशील डेटा संग्रहीत न करें; यह मार्कअप में दृश्यमान है।