HTMLде data атрибуттарын колдонуу эмнеге сунушталат?

data-* атрибуттары HTML элементине байланыштуу произвольдуу маалыматтарды сактоо үчүн колдонулат, стандарттык эмес атрибуттарды же DOM мүлктөрүн колдонууга муктаждык жок.

Негизги артыкчылыктары:

• Семантикалык туура: Алар HTML5 стандартынын бөлүгү болуп саналат жана документтин жарактуулугун бузбайт.
• Жолугушуу оңой: Маалыматтарга кирүү JavaScriptте dataset мүлкү аркылуу жүргүзүлөт, ал объект кайтарат жана ачкычтары data- кийинки бөлүктөргө ылайык келет.
• JavaScript/CSS үчүн ыңгайлуу: Алар белгилүү бир маалыматтарды элементтерге байлоо мүмкүнчүлүгүн берет, алар кийинчерээк JavaScript логикасында же CSS менен стилизацияда колдонулушу мүмкүн (атрибут селекторлору аркылуу).
• Маалымат жана презентацияны бөлүү: HTML түзүлүшүн маалыматтардан бөлүүгө жардам берет, алар жүрүм-турум же көрсөтүү үчүн колдонулушу мүмкүн.

Колдонуу мисалдары:

• Базадагы жазуу ID сактоо.
• Чыгуу терезеси же модалдык диалог үчүн параметрлерди сактоо.
• Элементтин абалын аныктоо (мисалы, data-state="active").
• Backendден frontendке кичинекей маалыматтарды өткөрүү жана JavaScriptте колдонуу.

JavaScriptте кирүү мисалы:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // "123" мааниге кирүү
const category = element.dataset.category; // "electronics" мааниге кирүү