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 ਨੂੰ ਗਲਤ ਬਣਾ ਦੇਣ।
ਹਾਲਾਂਕਿ, ਅਸਲ ਵਿੱਚ ਵੱਡਾ ਜਾਂ ਸੰਵੇਦਨਸ਼ੀਲ ਡੇਟਾ ਸਟੋਰ ਨਾ ਕਰੋ; ਇਹ ਮਾਰਕਅਪ ਵਿੱਚ ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਹੈ।