JavaScript метод Element.hasAttribute()

Определение и применение

JavaScript метод hasAttribute() объекта Element возвращает логическое значение, указывающее на то, имеет ли указанный элемент заданный атрибут или нет.

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

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Element.hasAttribute
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`hasAttribute`	✓1	✓12	✓1	✓8	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

const booleanResult = element.hasAttribute(attributeName);

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

DOM Standard.

Значения параметров

Параметры Element.hasAttribute()
Параметр	Описание
`attributeName`	Имя атрибута, наличие которого вы хотите проверить. Обязательный параметр.

Пример использования

Чтение и увеличение значения атрибута data-val

Нажмите ▶, затем Click me несколько раз: hasAttribute() подтверждает наличие data-val, в абзаце появляется текущее значение, после чего атрибут увеличивается на единицу.

index.html

HTML

<button data-migration-click-0="">Click me</button>
<p data-val="1"></p>

main.js

JavaScript

const checkAttr = function () {
    const p = document.querySelector('p'),
        attr = 'data-val'

    if (p.hasAttribute(attr)) {
        const attrVal = p.getAttribute(attr)
        p.innerHTML = attrVal

        const newAttrVal = Number(attrVal) + 1
        p.setAttribute(attr, newAttrVal)
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    checkAttr()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая:

Инициализирует две переменные, первая переменная содержит первый элемент  в документе, а вторая строковое значение (одноименное с атрибутом элемента ).
С помощью метода hasAttribute() проверяем имеется ли у элемента  атрибут со значением, содержащимся в переменной attr.
С помощью метода getAttribute() получаем значение этого атрибута и с помощью свойства innerHTML добавляем элементу  новое содержимое (значение атрибута data-val).
После этого инициализируем переменную, которая увеличивает значение атрибута data-val на 1, и с помощью метода setAttribute() устанавливаем новое значение для атрибута data-val элементу . Обратите внимание, что перед увеличением на единицу мы приводим строковое значение, содержащееся в переменной к числу, используя конструктор Number().