Пользовательские data-атрибуты в HTML, CSS и JavaScript

Data-атрибуты позволяют нам гибко создавать и манипулировать html-атрибутами в разметке веб-страниц, задавать дополнительную стилизацию и интерактивную логику поведения элементов.

Разбираемся с тем, что же такое кастомные атрибуты и как с ними работать в тройке языков HTML, CSS и JavaScript.

Примеры из видео:

__
Мои курсы по вебу с купонами:

[nhpwzec]

Спасибо.
PS голосую за то, что бы такие "редкие" темы поднимались чаще.
PS2 ещё хотелось бы увидеть как правильно получать данные с сайтов (по типу зайти в онлайн магазин и вывести всю мужскую одежду в массив)

[gritsienkooleg]

Полезно, спасибо огромное! Продвижения!)

[AlexGabber]

4 месяц плотно учу JS, разумеется знал про дата атрибуты, но никак не мог понять их пользу) сейчас в решении определенной задачи, долгое время искал определенное решение и все никак. Вспомнил про дата атрибут и появилась мысль попробовать реализовать решение с их помощью, наткнулся на это видео и тут коротко, без воды и очень легко объясняется в примерах использование дата атрибутов. Однозначно лайк. Частенько натыкаюсь на ваши видео и мне очень нравится, пожалуйста, продолжайте) Мне бы такого наставника и процесс изучения пошел бы намного быстрее. Спасибо Вам!

[vbenkovskyy]

Умничка, спасибо! Расскажите ещё, пожалуйста, про наблюдение за DOM, мутации и как это использовать ;)

[andreinechaev]

Сделайте пожалуйста видео по верстке многостраничного сайта с гитом, вебпаком и препроцессорами.

[AntonioBenderas]

Вот бы ещё про кастомные св-ва var(--text) и их взаимодействие с Js. Почему их даже в SCSS используют, если там есть свои переменные через $

[mr.Sinister-]

Моя мечта вообще знать как создавать аудио и видео плееры на сайте с нуля и любой сложности и однажды я просмотрел код чужого музыкального сайта и там плееры написаны чисто в теге ul и в li находятся несколько атрибутов data и благодаря этому как-то воспроизводится музыка и там нету тэга audio .Некоторые добавляют просто тэг audio и скрывают его не добавляя атрибут control но мне хочется использовать также тэг ul li для плееров.суперский вариант но сложный и потихоньку к этому приближаюсь.

[mr.Sinister-]

а как поконкретней можно указать взамен el в el.getAttribute на 8:10 ведь el это просто типо указано что можно взамен него указывать какой-то идентификатор или что-то ещё?или этот el встроенный или просто как-бы абстрактный как переменная под которой находится что-то?поконкретней можете пример привести

[ojlzwdi]

Скажите, а на скорость работы сайта это влияет? Обращение к атрибутам медленее, чем к классам?

[golbIi_veshaet]

А почему не использовать просто классы?