JavaScript: получаем атрибуты элементов с помощью "getAttribute()"

JavaScript предоставляет удобные методы для работы с атрибутами HTML-элементов. Один из самых полезных - это "getAttribute()", позволяющий получить значение любого атрибута элемента. Давайте разберемся, как им пользоваться.

Основы работы с атрибутами в JavaScript

Атрибуты HTML-элементов используются для хранения дополнительной информации об элементе. С их помощью можно задавать уникальный идентификатор элемента, CSS классы, данные для JavaScript и многое другое.

Существуют как стандартные атрибуты, определенные спецификацией HTML, так и пользовательские атрибуты, которые может добавлять сам разработчик.

В JavaScript есть несколько способов получить доступ к атрибутам элемента:

• Через соответствующие свойства DOM-элемента
• Через метод "getAttribute()"
• Через свойство "attributes"

Рассмотрим каждый из них подробнее.

Доступ к атрибутам через свойства DOM-элементов

При создании DOM-модели большинство стандартных атрибутов HTML элементов становятся свойствами соответствующих DOM-объектов.

Например, если в HTML коде есть элемент:

 <div id="myDiv"></div> 

То в JavaScript для него будет доступно свойство:

 const div = document.querySelector('#myDiv'); console.log(div.id); // выведет "myDiv" 

Это удобный способ получить значение атрибутов, не вызывая каждый раз методы вроде "getAttribute()".

Ограничения доступа к атрибутам через свойства

Однако есть несколько ограничений при использовании свойств для доступа к атрибутам:

• Работает не для всех атрибутов. Например, для атрибута "data-" будет создано свойство "dataset".
• Не работает для пользовательских атрибутов.
• Возможны конфликты имен с внутренними свойствами DOM-элементов.

Поэтому в некоторых случаях приходится использовать методы вроде "getAttribute()".

Получение всех атрибутов элемента через "attributes"

Свойство "element.attributes" содержит коллекцию объектов "Attr", представляющих все атрибуты элемента:

 const div = document.querySelector('#myDiv'); for (let attr of div.attributes) { console.log(`${attr.name} = ${attr.value}`); } 

Это позволяет перебрать все атрибуты элемента. Но для доступа к конкретному атрибуту проще использовать "getAttribute()".

Преимущества и недостатки разных способов доступа к атрибутам

Кратко резюмируем преимущества и недостатки:

Таким образом, у каждого подхода есть свои преимущества и недостатки. На практике чаще всего используют свойства DOM для стандартных атрибутов и "getAttribute()" для остальных случаев.

Метод "getAttribute()" - основы использования

Рассмотрим более подробно синтаксис и особенности применения метода "getAttribute()".

Синтаксис метода "getAttribute()"

Синтаксис вызова:

 element.getAttribute(attributeName) 

Где element - DOM элемент, а "attributeName" - имя атрибута в виде строки.

Аргумент - имя атрибута

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

Это может быть как стандартный атрибут вроде "id" или класс, так и пользовательский атрибут.

 const elem = document.getElementById('myElement'); // Получаем стандартный атрибут const id = elem.getAttribute('id'); // Получаем пользовательский атрибут const myAttr = elem.getAttribute('data-my-attr'); 

Возвращаемое значение - строка или "null"

Если атрибут присутствует на элементе, метод вернет его значение в виде строки.

Если же атрибута с таким именем не существует, будет возвращено значение "null".

 const classValue = elem.getAttribute('class'); // строка const unknownAttr = elem.getAttribute('unknown'); // null 

Сравнение "getAttribute()" и доступа к атрибутам через свойства

На примере атрибута "id" сравним доступ через свойство и через "getAttribute()":

 const elem = document.getElementById('myElement'); // Через свойство const id1 = elem.id; // Через getAttribute() const id2 = elem.getAttribute('id'); // Оба метода вернут одно и то же значение console.log(id1 === id2); // true 

Как видно, для стандартных атрибутов оба способа эквивалентны. А вот для пользовательских атрибутов требуется именно "getAttribute()":

 const myAttr = elem.getAttribute('data-my-attr'); 

Проверка существования атрибута с помощью "hasAttribute()"

Перед получением атрибута можно проверить, есть ли он у элемента, используя метод "hasAttribute()":

 if (elem.hasAttribute('data-my-attr')) { const myAttr = elem.getAttribute('data-my-attr'); } 

Это позволяет избежать получения "null" при обращении к несуществующим атрибутам.

Особенности работы "getAttribute()" в XML документах

В XML документах значения атрибутов недоступны напрямую как свойства элемента.

Поэтому "getAttribute()" - единственный способ получить значения атрибутов:

 <book isbn="9781593277574"> <title>JavaScript: The Definitive Guide</title> </book> const book = document.querySelector('book'); const isbn = book.getAttribute('isbn'); 

Поддержка "getAttribute()" в разных браузерах

Метод "getAttribute()" поддерживается во всех современных браузерах.

Также существуют полифилы, обеспечивающие кроссбраузерную поддержку для старых браузеров вроде IE6-8.