data-* பண்புக்கள் என்பவை எந்த HTML கூறுகளிலும் கொடுய மற்றும் தனிப்பட்ட தரவைச் சேமிக்க அனுமதிக்கின்றன. அவை DOM-க்கு மெட்டாடேட்டாவை இணைக்க ஒரு நிலையான வழி ஆகும், JavaScript படிக்க முடியும், அறிக்கை இல்லாத பண்புக்கள் அல்லது வகுப்புகளைப் பயன்படுத்தாமல்.
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 ஐ தவறாக ஆக்குவார்கள்.
பெரிய அல்லது உணர்வுள்ள தரவை அங்கு சேமிக்க வேண்டாம்; அவை markup இல் தெரியுமாறு உள்ளன.