Как удалить дата атрибут через js

Метод removeAttribute

Метод removeAttribute удаляет заданный атрибут у какого-либо тега.

Синтаксис

элемент.removeAttribute(имя атрибута);

Пример

Давайте для элемента удалим атрибут value :

let elem = document.querySelector(‘#elem’); elem.removeAttribute(‘value’);

HTML код станет выглядеть так (исчезнет атрибут value):

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

• метод getAttribute ,
  который получает атрибуты
• метод setAttribute ,
  который записывает атрибуты
• метод hasAttribute ,
  который проверяет атрибуты

Element.removeAttribute()

Вы должны использовать removeAttribute вместо того, чтобы устанавливать значение атрибута в null, используя setAttribute.

Попытка удаления атрибута, которого нет на элементе не вызывает ошибки.

Методы DOM имеют дело с атрибутами элементов:

Не знают пространства имён, наиболее часто используемые методы	Вариант, знающий пространство имён (Уровень DOM 2)	Уровень DOM 1 методы для работы с Attr узлами напрямую (используется редко)	Уровень DOM 2 знает о методах пространства имён для работы с Attr узлами напрямую (используется редко)
setAttribute (DOM 1)	setAttributeNS (en-US)	setAttributeNode (en-US)	setAttributeNodeNS (en-US)
getAttribute (DOM 1)	getAttributeNS (en-US)	getAttributeNode (en-US)	getAttributeNodeNS (en-US)
hasAttribute (DOM 2)	hasAttributeNS (en-US)	—	—
removeAttribute (DOM 1)	removeAttributeNS (en-US)	removeAttributeNode (en-US)	—

Спецификация

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.

Your blueprint for a better internet.

.dataset

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

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

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

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

   Обновлено 28 ноября 2022

   Кратко

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

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

   Возьмём следующий 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 .

   Удалить атрибут class из элемента :

   Метод removeAttribute() удаляет указанный атрибут из элемента.

   Разница между этим методом и методом removeAttributeNode() заключается в том, что метод removeAttributeNode() удаляет указанный объект Attr, в то время как этот метод удаляет атрибут с указанным именем. Результат будет тот же самый. Также этот метод не имеет возвращаемого значения, в то время как метод removeAttributeNode() возвращает удаленный атрибут в виде объекта Attr.

   Совет: Используйте метод getAttribute() для возврата значения атрибута элемента.

   Совет: Используйте метод setAttribute() для добавления атрибута к элементу.

   Поддержка браузера

   Метод
   removeAttribute()	Да	Да	Да	Да	Да

   Похожие публикации:

   1. Class program c что это
   2. Как включить assets store в unity
   3. Как очистить консоль в браузере
   4. Как сдвинуть массив си