Javascript queryselector data attribute

How to get, set, and remove data attributes with vanilla JavaScript

Today, we’re going to look at how to get, set, remove, and check for data attributes on an element. Let’s dig in!

What is a data attribute?

A data attribute is a custom attribute on an element that starts with data-* . It can be used to store information (or “state”) about the element, or even just as a selector for JavaScript components.

In this example, the button has a data attribute named [data-click] . It has a value of count .

button data-click="count">Count Upbutton>

Data attributes don’t have to have values, though. In this example, the button has a data attibute of [data-count] , without a value.

button data-count>Count Upbutton>

Now, let’s look at how to manipulate them with vanilla JavaScript.

Manipulating data attributes with JavaScript

The Element.getAttribute() , Element.setAttribute() , Element.removeAttribute() , and Element.hasAttribute() methods are used to get, set, remove, and check for the existence of attributes (including data attributes) on an element.

If an attribute does not exist on an element, the Element.getAttribute() method returns null .

let btn = document.querySelector('button'); // Get the value of the [data-click] attribute // returns "count" let click = btn.getAttribute('data-click'); // Set a value for the [data-count] attribute // Count Up  btn.setAttribute('data-count', 'up'); // Remove the [data-click] attribute btn.removeAttribute('data-click'); // Check if an element has the `[data-toggle]` attribute if (btn.hasAttribute('data-toggle'))  console.log('Toggle something, dude!'); > 

Data attributes and CSS

Data attributes are also valid CSS selectors. Wrap attribute selectors in square brackets, like this.

/** * Style the [data-count] button */ [data-count]  background-color: #0088cc; border-color: #0088cc; color: #ffffff; >

You can also use with JavaScript methods that accept CSS selectors as an argument, like document.querySelector() , document.querySelectorAll() , Element.matches() , and Element.closet() .

// Get elements with a data attribute let count = document.querySelector('[data-count]'); let allCounts = document.querySelectorAll('[data-count]'); // Check if an element has a data attribute if (count.matches('[data-click]'))  console.log('We have a match!'); > 

Custom attributes

While data attributes (starting with data-* ) are a common convention, you can create custom attributes, too. Some libraries do this.

For example, Vue does this with v-* attributes.

div id="app-3"> span v-if="seen">Now you see mespan> div>

You can use the Element.*Attribute() methods to manipulate custom attributes as well.

let span = document.querySelector('[v-if]'); // Update the value of the [v-if] attribute span.setAttribute('v-if', 'invisible'); 

Tomorrow, we’ll look at another way to get and set data attributes: the Element.dataset property. And on Friday, we’ll explore different strategies for working with data attributes.

Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.

Made with ❤️ in Massachusetts. Unless otherwise noted, all code is free to use under the MIT License. I also very irregularly share non-coding thoughts.

Источник

.dataset

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

Кратко

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

Свойство 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:

Преобразование названий работает и в обратную сторону – дата-атрибут на 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’ .

 Любое содержимое 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 .

Источник