Полное руководство по HTML-атрибутам data-*

[Roman_Mer]

В свое время, работа с «data-» стала для меня откровением, сейчас без этого сложный дизайн не сверстать. Благодарю за статью, интересно и освежил память)

[Sane]

А можно пример, который проще\лучше сделать на data-*, чем на классах?

[WanSpi]

Так data-* и не должна использоваться в CSS, этот тег придумали для бъединения JS и HTML, а то что используют CSS селекторы атрибутов, вместо классов, то можно руки поотрывать, не спорю, есть некоторые моменты, в которых, без атрибутных селекторов, не обойтись, но их на сайте должно быть еденицы.

[Rukuki_Ake]

data-theme='dark' на html и css vars в зависимости от data-theme — почти в каждой статье о темах, модно-молодёжно.

[Zaklinatel]

А .theme-dark чем не устраивает модных и молодёжных фронтдендеров?
Вон, в бутстрапе пресловутом примерно так же реализовано.

[shuchkin]

input[type=«radio»]
input[type=«checkbox»]…
яркие такие моменты

[shuchkin]

<tr data-id="12345"><td>Селиван Сталлоне</td></tr>
<tr data-id="12346"><td>Галина Гадот</td></tr>

var ids = querySelectorAll('tr[data]');
cosnsole.log( ids[0].dataset.id ); // 12345

[MarvinD]

В четырех строках описали смысл статьи. Спасибо!

[Metotron0]

Если нулевой индекс захардкожен, то All можно было не делать

[shuchkin]

можно
цель примера — показать с помощью минимального кода что это массив

[Metotron0]

Только это не массив

[Kassaila]

Это node list, подобие массива.

[shuchkin]

извините там ошибка, правильно:

var ids = document.querySelectorAll('tr[data-id]');
console.log( ids[0].dataset.id ); // 12345

codepen.io/shuchkin/pen/WNvXWJQ

[VolCh]

Когда-то, как PoC, сделал на них SPA без JS стейта. То есть все данные приложения лежали в атрибутах. Локальные переменные в хендерах были, но без долгоживущих замыканий. В принципе работало, но тормозило на каждый чих DOM менять

[i360u]

Все, что написано в секции с селекторами и многое в других секциях, справедливо для любых HTML-атрибутов вообще, а не только для data-*. Единственная особенность data-атрибутов — это проброс значений в свойство dataset у DOM-элемента.

[c_kotik]

Статья как нельзя кстати подошла. Помогла быстро решить проблему реализации DND — отделить мух от котлет дроп просто в контейнер или дроп на существующие элементы контейнера!

Тема действительно не распространенная, что странно. Поддержка браузерами заявлена широкая.

[hackteck]

Годная статья, но я бы верблюжий регистр оставил как CamelCase.