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(). Це забезпечує більший контроль над модифікацією атрибутів та дозволяє виконувати складніші операції з ними.

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

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

Синтаксис

getAttributeNode(attrName)

Повернення

attr

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	1	≤12.1	12	6

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

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

Приклади

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

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

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