Как найти элемент по data атрибуту js

важность: 5

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

   Choose the genre

   Choose the genre

Использование data-* атрибутов

HTML5 (en-US) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData() .

Синтаксис HTML

Синтаксис прост — любой атрибут, чьё имя начинается с data- , является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data -атрибуты:

article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> . article>

Доступ в JavaScript

Чтение data- атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод getAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект dataset (en-US).

Чтобы получить data -атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).

var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"

Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным «5» .

Доступ в CSS

Заметим, что data -атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию attr() :

article::before  content: attr(data-parent); >

Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:

article[data-columns="3"]  width: 400px; > article[data-columns="4"]  width: 600px; >

Увидеть как это работает можно в примере на JSBin.

Data -атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.

Проблемы

Не храните данные, которые должны быть видимы и доступны в data -атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data -атрибутах.

Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset . Для поддержки IE 10 и более ранних версий получение доступа к data -атрибутам необходимо осуществлять через getAttribute() . Также, производительность чтения data- атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute() .

Тем не менее, для пользовательских метаданных, связанных с элементами, data- атрибуты являются отличным решением.

Смотрите также

This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
How to use HTML5 data attributes (Sitepoint)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Как выбрать элемент по data атрибуту на js?

Как выбрать элемент по data атрибуту на чистом js.
На jquery через $(); выбирает, но на js через querySelector не работает. Пишет:
Failed to execute ‘querySelector’ on ‘Document’: ‘.dropdown__content[data-content=6]’ is not a valid selector.

var data_id = this.getAttribute('data-id'); var dropdown_content_ths = document.querySelector('.dropdown__content[data-content='+data_id+']');

Вопрос задан более трёх лет назад
22848 просмотров

2 комментария

Простой 2 комментария

Какой селектор использовать для поиска элемента по data-атрибуту?

Есть скрипт который работает по клику на IMG. Как правильно поставить условие, что если IMG имеет атрибут data-text=»test» , то скрипт не применять? P.S Контент лежит в одном блоке, переверстывать или как то отбирать по другому не вариант ( $(‘img.Class’) ) Добавлять класс к нужной IMG тоже не вариант: страниц очень много, и перебирать руками это ад, контент динамический.

Отслеживать
5,199 4 4 золотых знака 27 27 серебряных знаков 51 51 бронзовый знак
задан 20 мая 2018 в 21:11
33 1 1 серебряный знак 8 8 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

$('img:not([data-text="test"])').click(function() < console.log("aloha"); >);

Отслеживать
ответ дан 20 мая 2018 в 21:27
Ilia Brykin Ilia Brykin
1,633 1 1 золотой знак 6 6 серебряных знаков 13 13 бронзовых знаков

Используйте селектор img[data-text=»test»] . Если искомое слово «test» является одним из других слов внутри атрибута data-text , то воспользуйтесь оператором ~= , то есть так: img[data-text~=»test»] .

То есть приведенный мной первый селектор не сработает в случае если элемент имеет вид , а вот второй сработает.

Отслеживать
ответ дан 20 мая 2018 в 21:13
smellyshovel smellyshovel
5,199 4 4 золотых знака 27 27 серебряных знаков 51 51 бронзовый знак

javascript
html
jquery
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как найти элемент по data атрибуту js