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() поверне null. Це можна використати для перевірки наявності атрибута перед його обробкою. Наприклад:

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

Порада:

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

Порада:

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

Синтаксис

getAttribute(attributeName)

Параметри

Return

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

Переглядачі

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

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

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

Приклади

У цьому прикладі ми маємо елемент div з класом box. При натисканні на кнопку "Змінити клас" виконується функція toggleClass(), яка перевіряє, чи елемент має клас active за допомогою методу getAttribute(). Залежно від результату, функція додає або видаляє клас active за допомогою методу setAttribute(). Крім того, змінюється повідомлення під елементом, вказуючи, чи було додано або видалено клас active.

Цей приклад демонструє, як використовувати getAttribute() для перевірки наявності певного класу, а також як змінювати класи елемента за допомогою setAttribute().


  See the Pen <a href="https://codepen.io/css_in_ua/pen/QWPGbBL">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі показано, як використовувати метод getAttribute() для перевірки наявності певного класу CSS в елементі. Це корисно, коли потрібно змінювати стилі або поведінку елемента залежно від його стану або ролі на сторінці.

<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>

Важливо зазначити, що метод getAttribute() повертає рядкове значення атрибута. Якщо потрібно отримати числове значення, наприклад, для атрибута width або height, слід перетворити рядок на число за допомогою функцій parseInt() або parseFloat().

<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>

JS довідник

JavaScript

Наповнення JS розділу

JS метод Element.getAttribute()

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

Синтаксис

Параметри

Return

Переглядачі

Приклади