Метод 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) | — |
Удалить атрибут class из элемента :
Метод removeAttribute() удаляет указанный атрибут из элемента.
Разница между этим методом и методом removeAttributeNode() заключается в том, что метод removeAttributeNode() удаляет указанный объект Attr, в то время как этот метод удаляет атрибут с указанным именем. Результат будет тот же самый. Также этот метод не имеет возвращаемого значения, в то время как метод removeAttributeNode() возвращает удаленный атрибут в виде объекта Attr.
Совет: Используйте метод getAttribute() для возврата значения атрибута элемента.
Совет: Используйте метод setAttribute() для добавления атрибута к элементу.
Поддержка браузера
| Метод | |||||
|---|---|---|---|---|---|
| removeAttribute() | Да | Да | Да | Да | Да |
Как работат метод dataset в js?
Свойство .dataset , позволяет считывать, или устанавливать любые дата-атрибуты на HTML-элементе. Дата атрибуты используются, чтобы хранить значения на элементах в HTML.
data-id="1" data-article="3">Дата-атрибут — это пользовательский атрибут на элементе Container Обращение к свойству .dataset вернёт объект со всеми дата-атрибутами, которые есть на элементе.
const p = document.querySelector('p') console.log(p.dataset) // // можно обратится к конкретному атрибуту как к свойству console.log(p.dataset.article) // '3' Если дата-атрибутов на элементе нет, то вернётся пустой объект:
const container = document.querySelector('div') console.log(container.dataset) // <> Добавляем дата-атрибут к элементу. Название поля должно быть без префикса data-, браузер автоматически подставит его. Атрибуты состоящие из нескольких слов записываются в .dataset c помощью camelСase , а в HTML будут иметь названия в kebab-case. В значениях атрибутов в HTML могут быть только строки, поэтому любое значение будет автоматически приведено к строке.
Все не строковые значения будут приводиться к строке.
const p = document.querySelector('p') p.dataset.page = 42; p.bookNumber = 5; data-page ="42" data-book-number="5">Все не строковые значения будут приводиться к строке. Удалить дата-атрибут можно с помощью оператора delete. Возьмем предыдущий html
data-page ="42" data-book-number="5">Все не строковые значения будут приводиться к строке. const element = document.querySelector('p'); delete element.dataset.bookNumber; data-page ="42">Все не строковые значения будут приводиться к строке.