JavaScript метод Element.getAttributeNames()

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

JavaScript метод getAttributeNames() объекта Element позволяет возвратить имена всех атрибутов элемента в виде массива строк. Если элемент не имеет атрибутов, он возвращает пустой массив.

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

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

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

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

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

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

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
getAttributeNames	✓61	✓18	✓45	✓48	✓10.1	✓61	✓45	✓45	✓10.3	✓8.0	✓61	✓10.3

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

JavaScript синтаксис

const attributeNames = element.getAttributeNames();

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

DOM Standard.

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

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

Нажмите ▶, затем кнопку в результате: под ней появятся имена и значения всех её атрибутов, полученные через 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> новое содержимое (каждый атрибут элемента и его значение).