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-ში გადასაცემად ক্লায়েন্ტის მხარეს JavaScript-ისთვის (დამატებითი API ზარის გარეშე), ღვენის დელეგაციის დასაკავშირებლად და CSS მდგომარეობის ამოძრავებისთვის — სტანდარტის გარეშე ატრიბუტების გამოგონების გარეშე, რომელიც HTML-ს არასწორი გახდებდა.
ნუ შეინახავთ დიდი ან მგრძნობიარე მონაცემები იქ; ისინი ხილული არიან მარკირებაში.