css.in.ua
Підтримати

JS метод Element.getAttributeNode()

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

Метод getAttributeNode() дозволяє отримати об'єкт Attr, що представляє вказаний атрибут елемента. На відміну від методу getAttribute(), який повертає лише рядкове значення атрибута, getAttributeNode() надає доступ до всієї інформації про атрибут, включно з його назвою, значенням та іншими властивостями. Цей метод є корисним у випадках, коли потрібно маніпулювати атрибутами на більш глибокому рівні або отримувати додаткову інформацію про них.

Використання getAttributeNode() найпростіше продемонструвати на прикладі:

let link = document.getElementById('myLink');
let attrNode = link.getAttributeNode('href');
console.log(attrNode.name); // "href"
console.log(attrNode.value); // "https://example.com"

У цьому прикладі ми отримуємо об'єкт Attr для атрибута href елемента з ідентифікатором myLink. Потім ми можемо отримати доступ до властивостей name та value цього об'єкта, що містять назву та значення атрибута відповідно.

Метод getAttributeNode() також дозволяє перевірити наявність атрибута в елементі. Якщо атрибут не присутній, метод поверне null:

let div = document.createElement('div');
let attrNode = div.getAttributeNode('id');
if (attrNode === null) {
  console.log("Атрибут 'id' не присутній");
}

Однією з переваг використання getAttributeNode() є можливість модифікувати значення атрибута безпосередньо через об'єкт Attr. Наприклад, ми можемо змінити значення атрибута href для нашого посилання:

attrNode.value = 'https://newsite.com';
link.setAttributeNode(attrNode);

Тут ми змінюємо властивість value об'єкта Attr, а потім використовуємо метод setAttributeNode() для застосування змін до елемента.

getAttributeNode() також корисний у випадках, коли потрібно отримати додаткову інформацію про атрибут, наприклад, його специфікацію або значення за замовчуванням. Об'єкт Attr містить властивості, такі як specified та ownerElement, які надають цю інформацію.

Важливо пам'ятати, що після отримання об'єкта Attr за допомогою getAttributeNode() будь-які зміни, внесені безпосередньо в об'єкт, не впливають на атрибут елемента, доки не буде викликано метод setAttributeNode(). Це забезпечує більший контроль над модифікацією атрибутів та дозволяє виконувати складніші операції з ними.

Порада:

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

let attrNode = element.getAttributeNode('data-custom');
if (attrNode !== null) {
  // Обробляти атрибут
}
Порада:

Після отримання об'єкта Attr за допомогою getAttributeNode() ви можете модифікувати його властивості, наприклад, value. Проте зміни не будуть застосовані до елемента DOM, доки не буде викликано метод setAttributeNode(attrNode). Це дозволяє виконувати складніші операції з атрибутами перед їх застосуванням.
Порада:

Об'єкт Attr містить додаткові властивості, такі як name, specified та ownerElement, що надають більше інформації про атрибут. Наприклад, attrNode.specified вказує, чи був атрибут явно заданий в коді, а attrNode.ownerElement посилається на елемент, до якого належить атрибут. Ця додаткова інформація може бути корисною в певних сценаріях роботи з DOM.

Синтаксис

getAttributeNode(attrName)

Параметри

Return

attr

Повертає об'єкт Attr, що представляє вказаний атрибут елемента DOM. Цей об'єкт містить інформацію про ім'я атрибута, його значення, а також додаткові властивості, такі як specified та ownerElement. Якщо атрибут не присутній в елементі, метод поверне null.

Переглядачі

Переглядач

1

1

1

12.1

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі ми маємо елемент div з атрибутом data-color="red". При натисканні на кнопку "Змінити колір" виконується функція changeColor(), яка отримує об'єкт атрибута data-color за допомогою методу getAttributeNode(). Потім функція змінює значення атрибута на наступний колір (зелений, синій, червоний) за допомогою методу setAttributeNode(). Також змінюється колір тексту елемента `div

У цьому прикладі показано, як використовувати метод getAttributeNode() для отримання об'єкта атрибута елемента. Це корисно, коли потрібно отримати додаткову інформацію про атрибут, наприклад його назву або значення за замовчуванням.

<input type="text" id="myInput" value="Початкове значення" data-custom="Додаткова інформація">

<script>
const inputElement = document.getElementById('myInput');

// Отримуємо об'єкт атрибута value
const valueAttr = inputElement.getAttributeNode('value');
console.log(valueAttr.name); // Виведе "value"
console.log(valueAttr.value); // Виведе "Початкове значення"

// Отримуємо об'єкт атрибута data-custom
const customAttr = inputElement.getAttributeNode('data-custom');
console.log(customAttr.name); // Виведе "data-custom"
console.log(customAttr.value); // Виведе "Додаткова інформація"
</script>

У цьому прикладі ми спочатку перевіряємо наявність атрибута data-role за допомогою getAttributeNode(). Якщо атрибут існує, ми виводимо його значення. Потім ми отримуємо об'єкт атрибута data-state і змінюємо його значення на 'active' за допомогою методу setAttributeNode().

<div id="myDiv" data-role="button" data-state="inactive">Натисніть мене</div>

<script>
const divElement = document.getElementById('myDiv');

// Перевіряємо наявність атрибута data-role
const roleAttr = divElement.getAttributeNode('data-role');
if (roleAttr) {
  console.log(`Елемент має атрибут data-role="${roleAttr.value}"`);
} else {
  console.log('Елемент не має атрибута data-role');
}

// Змінюємо значення атрибута data-state
const stateAttr = divElement.getAttributeNode('data-state');
if (stateAttr) {
  stateAttr.value = 'active';
  divElement.setAttributeNode(stateAttr);
  console.log('Значення атрибута data-state змінено на "active"');
}
</script>

Спільнота

Зв'язок