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

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

  • автор:

Как найти элемент по 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)

Выбор DOM-элементов по data- атрибуту без jquery в JS

Чтобы выбрать элементы с атрибутом data-xxx , примените следующий синтаксис:

Скопировать код

const dataElements = document.querySelectorAll('[data-xxx]');

Для вывода соответствующих значений в консоль, выполните:

Скопировать код

dataElements.forEach(el => console.log(el.dataset.xxx));

Используя исключительно JavaScript, мы легко нацеливаемся на data-атрибуты, минуя jQuery. Вот так просто!

От NodeList к упрощённому Array

Недостаток querySelectorAll заключается в том, что он возвращает NodeList , который хотя и похож на массив, но не является таковым. Однако проблема легко решается:

Скопировать код

// Приготовьтесь, идет преобразование const dataElementsArray = Array.from(dataElements);

Теперь мы можем пользоваться всеми удобствами методов массива в JavaScript!

Скорость — это не просто «быстрее»

querySelectorAll является эффективным, но при работе с крупными документами может привести к замедлению работы. Чтобы предотвратить замедление, сократите область поиска:

Скопировать код

// Надеваем покровы от замедления const container = document.getElementById('specific-container'); const scopedDataElements = container.querySelectorAll('[data-xxx]');

Чем меньше ищем, тем лучше!

Выцепить ценное (или data-атрибут)

Чтобы получить фактическое значение атрибута data-xxx , используйте dataset :

Скопировать код

// Это будет нашим волшебным окном в данные dataElements.forEach(el => < const value = el.dataset.xxx; console.log(value); >);

Визуализация

Представьте, что наш мгновенный взгляд скользит по лесу виртуальных элементов:

Скопировать код

Лес: ��������(data-xxx)��������������(data-xxx)������

И вот наш CSS-селектор попадает в цель:

Скопировать код

[data-xxx] < /* Стили для выделения элементов с data-xxx */ >

Скопировать код

Найдено: ✨��(data-xxx)✨ ✨��(data-xxx)✨

CSS-селекторы делают поиск удобным и быстрым!

Знакомство с динамическими обновлениями

Проблемы статического NodeList

querySelectorAll не отслеживает изменения в DOM, поэтому для мониторинга динамических изменений воспользуйтесь MutationObserver :

Скопировать код

// Мы становимся агентами следящими за NodeList const observer = new MutationObserver(mutations => < mutations.forEach(mutation => < if (mutation.type === 'childList') < // Обработайте добавление или удаление узлов >>); >); observer.observe(document.body, < childList: true, subtree: true >);

Слияние массивов

Пора подружить querySelectorAll с другими методами для массивов. А методам массивов – привет:

Скопировать код

// Инициируем действие Array.from(dataElements) .filter(el => el.dataset.xxx === 'specificValue') .forEach(el => < /* . */ >);

Но не забывайте о проверке

querySelectorAll не всегда совместим с некоторыми браузерами. Проверьте его поддержку на Can I use. .

Полезные материалы

  1. HTML Global data-* Attributes — знакомство с data-атрибутами в HTML5.
  2. Использование data-атрибутов – Обучение веб-разработке | MDN — подробное руководство по использованию data-атрибутов.
  3. Полное руководство по Data-Attributes | CSS-Tricks — все об возможностях data-атрибутов.
  4. Selectors API Level 1 — официальная спецификация Selectors API от W3C для DOM.
  5. Атрибутные селекторы – CSS: Каскадные Таблицы Стилей | MDN — руководство по атрибутным селекторам в CSS.
  6. :not | CSS-Tricks — как исключать элементы с определенными атрибутами, используя :not() .
  7. Can I use. Таблицы поддержки для HTML5, CSS3 и других технологий — таблица совместимости браузеров для querySelector .

Завершение

Продолжайте практиковать! Каждая проблема — это еще один шаг к совершенству. А «лайки» — приятный бонус.

Пусть мудрость кода пребудет с вами! ��‍��

.dataset

Простейший способ хранить данные в HTML и читать их из JavaScript.

Время чтения: 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Как пишется
    1. Использование camelCase и kebab-case
    2. Удаление дата-атрибута
    1. Егор Огарков советует

    Обновлено 12 апреля 2024

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    Свойство dataset позволяет считывать или устанавливать любые дата-атрибуты на HTML-элементе.

    Дата-атрибут — это пользовательский атрибут на элементе, название которого начинается с data — , например data — testid . Дата атрибуты используются, чтобы хранить значения на элементах в HTML.

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Обращение к свойству dataset вернёт объект со всеми дата-атрибутами, которые есть на элементе. Названиями полей в объекте будут имена дата-атрибутов после префикса data — . Например, если атрибут называется data — columns , то поле в объекте для этого атрибута будет называться columns .

     const items = document.querySelectorAll('li') const firstItem = items[0] console.log(firstItem.dataset)// const items = document.querySelectorAll('li') const firstItem = items[0] console.log(firstItem.dataset) //     

    Если дата-атрибутов на элементе нет, то вернётся пустой объект:

     const heading = document.querySelector('h1') console.log(heading.dataset)// <> const heading = document.querySelector('h1') console.log(heading.dataset) // <>      

    Чтобы добавить дата-атрибут к элементу, нужно добавить новое поле в объект dataset . Название поля так же должно быть без префикса data — , браузер автоматически подставит его. В значениях атрибутов в HTML могут быть только строки, потому любое значение будет автоматически приведено к строке.

    Возьмём тот же HTML из примера выше и добавим дата-атрибуты ко второму элементу:

     const items = document.querySelectorAll('li') const secondItem = items[1] secondItem.dataset.side = 'evil'secondItem.dataset.age = 46secondItem.dataset.lightsaber = const items = document.querySelectorAll('li') const secondItem = items[1] secondItem.dataset.side = 'evil' secondItem.dataset.age = 46 secondItem.dataset.lightsaber =  color: 'red' >      

    В результате получим такой элемент:

      data-id="9434" data-episode="4" data-side="evil" data-age="46" data-lightsaber="[object Object]"> Дарт Вейдер  li data-id="9434" data-episode="4" data-side="evil" data-age="46" data-lightsaber="[object Object]"> Дарт Вейдер li>      

    Все нестроковые значения, установленные в dataset , будут приводиться к строке. Поэтому объект превращается в [object Object ] , а число 46 — в строку «46» .

    Если в dataset добавить поле с пустым значением, то в HTML будет создан дата-атрибут без значения.

    Использование camelCase и kebab-case

    Скопировать ссылку «Использование camelCase и kebab-case» Скопировано

    В dataset необходимо присваивать поля, названия которых записываются в одно слово. Потому для составных имён используется только camel Case -нотация. При попытке присвоить название в kebab — case будет выброшена ошибка.

     const body = document.querySelector('body') body.dataset['dark-theme'] = true // Uncaught DOMException: Failed to set// a named property on 'DOMStringMap':// 'dark-theme' is not a valid property name const body = document.querySelector('body') body.dataset['dark-theme'] = true // Uncaught DOMException: Failed to set // a named property on 'DOMStringMap': // 'dark-theme' is not a valid property name      

    Дата-атрибуты, записанные в dataset с помощью camel Case , в HTML будут иметь названия в kebab — case . Браузер преобразует camel Case в kebab — case :

     const item = document.querySelector('li') item.dataset.yearsOfExperience = 2item.dataset.candidateRole = 'junior' const item = document.querySelector('li') item.dataset.yearsOfExperience = 2 item.dataset.candidateRole = 'junior'      

    После выполнения кода выше получится следующий HTML:

        Иван Иванов   ul> li data-candidate-role="junior" data-years-of-experience="2"> Иван Иванов li> ul>      

    Преобразование названий работает и в обратную сторону – дата-атрибут на HTML-элементе, записанный в kebab — case , будет превращён в dataset в camel Case .

     const item = document.querySelector('li') console.log(item.dataset)// const item = document.querySelector('li') console.log(item.dataset) //     

    Удаление дата-атрибута

    Скопировать ссылку «Удаление дата-атрибута» Скопировано

    Удалить дата-атрибут можно только с помощью оператора delete . Если попытаться присвоить к полю значение undefined или null , то браузер просто присвоит атрибуту строку ‘undefined’ или ‘null’ .

    Возьмём следующий HTML:

     Любое содержимое div data-testid="test">Любое содержимоеdiv>      

    При установке undefined в значение дата-атрибута, он не удалится с элемента.

     const element = document.querySelector('div') element.dataset.testid = undefined const element = document.querySelector('div') element.dataset.testid = undefined      

    В результате получится следующий HTML:

     Любое содержимое div data-testid="undefined">Любое содержимоеdiv>      

    Если использовать оператор delete , то получим элемент без дата-атрибута.

     delete element.dataset.testid delete element.dataset.testid      
     
    Любое содержимое
    div>Любое содержимоеdiv>

    Свойство dataset защищено от перезаписи. Это значит, что попытка присвоить в dataset новое значение будет проигнорирована.

     const element = document.querySelector('div') // Ничего не произойдёт, дата-атрибуты// на элементах тоже не изменятсяelement.dataset = <>element.dataset = 'string' const element = document.querySelector('div') // Ничего не произойдёт, дата-атрибуты // на элементах тоже не изменятся element.dataset = > element.dataset = 'string'      

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Дата-атрибуты появились в HTML5 и добавили возможность разработчикам добавлять свои собственные атрибуты к элементам. Причин для использования таких атрибутов можно придумать множество. Чаще всего в дата-атрибутах хранят нужные значения, которые используют в CSS или JavaScript.

    Дата-атрибуты были созданы специально для того, чтобы хранить и работать с данными прямо в HTML. Отсюда и префикс data, что в переводе значит данные. Например, с помощью дата-атрибутов можно хранить значение выбранное в выпадающем списке прямо на элементе.

    Хранение данных на HTML-элементах так же полезно для инициализации виджетов в JavaScript. Они могут находить нужные элементы, используя дата-атрибут как селектор, и читать данные из атрибута. Например, в многостраничных приложениях HTML генерируется на сервере, и готовая страница отправляется в ответ на запрос. Во время генерации в HTML можно подставить дата-атрибуты с данными с сервера, и, таким образом, пробросить их в JavaScript.

    В теории для такой же цели можно использовать и обычный идентификатор id , но цель у этого атрибута совсем другая. Плюс спецификация требует, чтобы значение атрибута id было уникальным на всей странице.

    Дата-атрибутов на элементе может быть сколько угодно, потому удобно располагать отдельные кусочки данных в свой атрибут. Такого точно нельзя достичь, используя только идентификатор.

    Браузер даёт возможность управлять дата-атрибутами через специальное API dataset .

    На практике

    Скопировать ссылку «На практике» Скопировано

    Егор Огарков советует

    Скопировать ссылку «Егор Огарков советует» Скопировано

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

     [data-id]  /* Селектор для всех элементов с data-id */> [data-id="123"]  /* Селектор только для элементов с data-id="123" */> [data-id]  /* Селектор для всех элементов с data-id */ > [data-id="123"]  /* Селектор только для элементов с data-id="123" */ >      

    Найти элемент с data — id = «123» :

     const element = document.querySelector('[data-id="123"]') const element = document.querySelector('[data-id="123"]')      

    �� Некоторые фреймворки во время компиляции самостоятельно генерируют дата-атрибуты и присваивают их к элементам, чтобы делать изоляцию CSS.

    �� Дата-атрибуты широко используются в автоматизированном тестировании. Для этого на необходимых элементах расставляют дата-атрибуты, и тест обращается к ним. В документациях к различным библиотекам для тестирования часто можно встретить атрибут data — testid .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *