JavaScript метод Element.getAttribute()

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

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

Обращаю Ваше внимание на то, что объекты, представляющие HTML элементы определяют JavaScript свойства, соответствующие стандартным HTML атрибутам, по этой причине этот метод будет более актуален для обращения к нестандартным атрибутам.

В XML документах значения атрибутов недоступны непосредственно как свойства элемента, по этой причине необходимо использовать метод getAttribute() для доступа к ним. Для XML документов, в которых используются пространства имен необходимо использовать метод getAttributeNS() (в таких документах в имя атрибута включается префикс пространства имен и двоеточие).

Использование метода getAttribute() вместе с методом getAttributeNames(), который возвращает имена всех атрибутов элемента в виде массива строк, является эффективным с точки зрения производительности и служит альтернативой свойству Element.attributes.

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`getAttribute()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

const attributeVal = element.getAttribute( attributeName );

attributeName - String

Версия JavaScript

Document Object Model (DOM) Level 1 Core

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование методов hasAttribute(), getAttribute() и setAttribute()</title>
	</head>
	<body>
		<button onclick = "checkAttr()">Click me</button> <!-- добавляем атрибут событий onclick -->
		<p data-val = "1"></p>
		<script>
	function checkAttr() {
	  const p = document.querySelector("p"), // выбираем первый элемент <p> в документе
	        attr = "data-val"; // инициализируем переменную строковым значением
    
	  if ( p.hasAttribute(attr) ) { // проверяем имеется ли у элемента атрибут со значением, содержащимся в переменной attr
	    const attrVal = p.getAttribute(attr); // получаем значение этого атрибута
	    p.innerHTML = attrVal; // добавляем элементу <p> новое содержимое (значение атрибута data-val )
    
	    const newAttrVal = Number(attrVal) + 1; // инициализируем переменную, которая увеличивает значение атрибута data-val на 1
	    p.setAttribute(attr, newAttrVal); // устанавливаем новое значение для атрибута data-val
	  }  
	}
		</script>
	</body>
</html>

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

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

Результат нашего примера:

Пример использования методов hasAttribute(), getAttribute() и setAttribute()

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .getAttributeNames() и getAttribute()</title>
	</head>
	<body>
		<button onclick = "myFunc()" class = "myButton" name = "active-button" value = "100" data-val = "123">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
		<div class = "info"></div>
		<script>
	function myFunc() {
	  const btn = document.querySelector("button"), // находим первый элемент <button> в документе
                info = document.querySelector(".info"); // находим первый элемент с классом 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>"; // добавляем новое содержимое элементу
	  }		
	}
		</script>
	</body>
</html>

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

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

Результат нашего примера:

Пример использования JavaScript метода .getAttributeNames() и getAttribute()

JavaScript Element