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(attrName)

Параметри

Return

attr

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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