JavaScript метод Element.getAttribute()

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

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

В XML произвольные атрибуты не становятся одноимёнными JavaScript-свойствами элемента. getAttribute() ищет атрибут по квалифицированному имени, включая префикс при его наличии. getAttributeNS(namespaceURI, localName) ищет по пространству имён и локальному имени независимо от выбранного в документе префикса.

getAttributeNames() возвращает массив имён на момент вызова; затем getAttribute() читает значения по этим именам. Это альтернатива живой коллекции узлов attributes, а не гарантия более высокой производительности.

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

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

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

Показать браузеры

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

Совместимостьapi.Element.getAttribute

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
getAttribute	✓1	✓12	✓1	✓8	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

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

JavaScript синтаксис

const attributeVal = element.getAttribute(attributeName);

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

DOM Standard.

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

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

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

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

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>) вызываем функцию, которая:

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

В следующем примере мы рассмотрим совместное использование методов getAttributeNames() и getAttribute():

Вывод всех атрибутов кнопки

Нажмите ▶, затем кнопку в результате: под ней появятся имена и значения всех её атрибутов, полученные через getAttributeNames() и getAttribute().

index.html

HTML

<button data-migration-click-0="" class="myButton" name="active-button" value="100" data-val="123">Нажми меня</button>
<div class="info"></div>

main.js

JavaScript

function myFunc() {
    const btn = document.querySelector('button'),
        info = document.querySelector('.info')

    let attributeNames = btn.getAttributeNames()

    for (let name of attributeNames) {
        let val = btn.getAttribute(name)

        info.innerHTML += '<p>Имя атрибута: <b>' + name + '</b>. Значение атрибута: <b>' + val + '</b></p>'
    }
}

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

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода querySelector() находит первый элемент <button> в документе и первый элемент с классом info, и инициализирует переменные этими значениями.

С помощью метода getAttributeNames() возвращаем имена всех атрибутов элемента <button> в виде массива строк и инициализируем переменную этим значением. После этого с помощью цикла проходим по всем элементам массива и вызываем на каждой итерации метод getAttribute(), который получает значение переданного атрибута, и с помощью свойства innerHTML добавляем элементу <div> новое содержимое (каждый атрибут элемента и его значение).

Атрибут и текущее значение поля

Измените текст поля: value изменится, а getAttribute("value") сохранит исходное значение. Кнопка восстановит его через defaultValue.

index.html

HTML

<label for="name">Имя</label>
<input id="name" value="Анна" />
<button id="reset" type="button">Вернуть исходное значение</button>
<pre id="result" aria-live="polite"></pre>

main.js

JavaScript

const field = document.querySelector('#name')
const result = document.querySelector('#result')
function show() {
    result.textContent = 'Атрибут: ' + field.getAttribute('value') + '\nСвойство: ' + field.value
}
field.addEventListener('input', show)
document.querySelector('#reset').addEventListener('click', () => {
    field.value = field.defaultValue
    show()
})
show()