JavaScript метод Element.hasAttribute()

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

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

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

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

JavaScript синтаксис:

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

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

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

JavaScript Element