Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Element.getAttribute()

JavaScript Element

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

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


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


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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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>) вызываем функцию, которая:

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

Пример использования методов hasAttribute(), getAttribute() и setAttribute()
Пример использования методов 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 метода .getAttributeNames() и getAttribute()
JavaScript Element
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.