JS метод Element.getAttribute()

Загальний опис

Element.getAttribute() — це метод інтерфейсу Element в JavaScript, який повертає значення атрибута елемента з вказаним ім'ям. Цей метод використовується для отримання значень атрибутів HTML-елементів, таких як id, class, src, href та інших. Він є корисним інструментом для маніпуляції та взаємодії з елементами сторінки за допомогою JavaScript.

Використання getAttribute() є досить простим. Ви викликаєте цей метод на об'єкті Element і передаєте ім'я атрибута як аргумент у вигляді рядка. Наприклад, щоб отримати значення атрибута id елемента <div>, ви можете використати наступний код:

const myDiv = document.querySelector('div');
const idValue = myDiv.getAttribute('id');
console.log(idValue); // Виведе значення атрибута id елемента div

Метод getAttribute() є особливо корисним при роботі з нестандартними атрибутами, створеними розробниками. Наприклад, припустимо, ви маєте елемент <button> з нестандартним атрибутом data-action:

<button id="myButton" data-action="openModal">Відкрити модальне вікно</button>

Ви можете отримати значення цього атрибута за допомогою getAttribute():

const myButton = document.getElementById('myButton');
const actionValue = myButton.getAttribute('data-action');
console.log(actionValue); // Виведе "openModal"

Крім того, getAttribute() може бути корисним при роботі з атрибутами, які можуть мати декілька значень, наприклад, атрибут class. Припустимо, ви маєте елемент <div> з кількома класами:

<div id="myDiv" class="container primary-content"></div>

Ви можете отримати значення атрибута class за допомогою getAttribute():

const myDiv = document.getElementById('myDiv');
const classValue = myDiv.getAttribute('class');
console.log(classValue); // Виведе "container primary-content"

Метод getAttribute() також можна використовувати для перевірки наявності атрибута в елементі. Якщо атрибут відсутній, метод поверне null або "" (порожній рядок), залежно від браузера. Ви можете перевірити це наступним чином:

const myLink = document.querySelector('a');
const targetValue = myLink.getAttribute('target');

if (targetValue === null || targetValue === '') {
  console.log('Атрибут target відсутній');
} else {
  console.log(`Значення атрибута target: ${targetValue}`);
}

Загалом, Element.getAttribute() є потужним і гнучким інструментом для отримання значень атрибутів HTML-елементів та взаємодії з ними за допомогою JavaScript. Він забезпечує доступ до даних, збережених в атрибутах, і дозволяє маніпулювати цими даними відповідно до потреб вашого коду.

правити

Порада

На відміну від властивостей об'єкта елемента, значення, отримані через getAttribute(), завжди є рядками. Якщо потрібно отримати числове значення, його слід перетворити явно. Наприклад, let width = parseInt(element.getAttribute('width'), 10);.

автор: Bond правити

Порада

Метод getAttribute() є корисним для динамічної зміни значень атрибутів елементів на основі певних умов або вхідних даних. Наприклад, в процесі валідації форми можна змінювати значення атрибута title для полів вводу, щоб відображати відповідні повідомлення про помилки.

автор: Bond правити

Порада

Якщо атрибут не присутній в елементі, метод getAttribute() поверне null. Це можна використати для перевірки наявності атрибута перед його обробкою. Наприклад:

let imgSrc = img.getAttribute('src');
if (imgSrc !== null) {
  // Обробляти значення атрибута src
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

getAttribute(attributeName)

Повернення

string

Повертає рядок, що містить значення вказаного атрибуту.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<img id="myImage" src="image.jpg" alt="Моє зображення" width="300">

<script>
// Отримуємо елемент за його ідентифікатором
const imgElement = document.getElementById('myImage');

// Отримуємо значення атрибута src
const imgSrc = imgElement.getAttribute('src');
console.log(imgSrc); // Виведе "image.jpg"

// Отримуємо значення атрибута width
const imgWidth = imgElement.getAttribute('width');
console.log(imgWidth); // Виведе "300"
</script>

<div id="myDiv" class="container active">Цей елемент має клас "active"</div>

<script>
// Отримуємо елемент за його ідентифікатором
const divElement = document.getElementById('myDiv');

// Перевіряємо, чи елемент має клас "active"
const hasActiveClass = divElement.getAttribute('class').includes('active');

if (hasActiveClass) {
  console.log('Елемент має клас "active"');
  // Виконуємо додаткові дії, якщо елемент має клас "active"
} else {
  console.log('Елемент не має класу "active"');
}
</script>