data-* లక్షణాలు ఏదైనా HTML మూలకంపై కస్టమ్, ప్రైవేట్ డేటాను నిల్వ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి. DOM కు మెటాడేటాను జతచేయడానికి అవి ఒక ప్రామాణిక మార్గం, JavaScript చదవవచ్చు, ప్రమాణికం కాని లక్షణాలు లేదా తరగతులను దుర్వినియోగం చేయకుండా.
html
Edit
data-* లక్షణాలు ఏదైనా HTML మూలకంపై కస్టమ్, ప్రైవేట్ డేటాను నిల్వ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి. DOM కు మెటాడేటాను జతచేయడానికి అవి ఒక ప్రామాణిక మార్గం, JavaScript చదవవచ్చు, ప్రమాణికం కాని లక్షణాలు లేదా తరగతులను దుర్వినియోగం చేయకుండా.
Edit
dataset ద్వారా JavaScriptలో చదువుట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ని చెల్లనిదిగా చేస్తాయి.
బిగ్గర లేదా సున్నితమైన డేటాను అక్కడ నిల్వ చేయవద్దు; ఇది మార్కప్లో కనిపిస్తుంది.