JS метод Attr.getNamedItem()

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

getNamedItem() є методом об'єкта NamedNodeMap, який повертає вузол (node) із заданим name або null, якщо такий вузол не знайдено. Цей метод часто використовується для отримання атрибутів елементів у документі XML або HTML.

Метод getNamedItem() приймає один аргумент - рядок, який представляє ім'я шуканого атрибута. Наприклад, якщо ми маємо елемент <div id="myDiv" class="myClass">, то getNamedItem('id') поверне атрибут id із значенням "myDiv", а getNamedItem('class') поверне атрибут class із значенням "myClass".

Розглянемо простий приклад використання getNamedItem() в JavaScript:

const div = document.getElementsByTagName('div')[0];
const idAttr = div.attributes.getNamedItem('id');
console.log(idAttr.value); // Виведе значення атрибута id для першого div елемента

У цьому прикладі ми отримуємо перший div елемент на сторінці використовуючи document.getElementsByTagName('div')[0]. Потім ми отримуємо об'єкт NamedNodeMap, який містить всі атрибути цього елемента через властивість attributes. Нарешті, ми викликаємо getNamedItem('id') на цьому об'єкті, щоб отримати атрибут id, і виводимо його значення в консоль.

Метод getNamedItem() також можна використовувати в циклах для перебору всіх атрибутів елемента:

const div = document.getElementsByTagName('div')[0];
const attrs = div.attributes;

for (let i = 0; i < attrs.length; i++) {
  const attr = attrs.getNamedItem(attrs[i].name);
  console.log(`Атрибут: ${attr.name}, Значення: ${attr.value}`);
}

У цьому прикладі ми проходимо циклом по всіх атрибутах div елемента використовуючи attrs.length. Для кожного атрибута ми викликаємо getNamedItem() з іменем поточного атрибута attrs[i].name, щоб отримати об'єкт атрибута, і виводимо його ім'я та значення в консоль.

getNamedItem() також можна використовувати для перевірки наявності певного атрибута в елементі:

const div = document.getElementsByTagName('div')[0];
const idAttr = div.attributes.getNamedItem('id');

if (idAttr) {
  console.log(`Елемент має атрибут id зі значенням ${idAttr.value}`);
} else {
  console.log('Елемент не має атрибута id');
}

У цьому прикладі ми перевіряємо, чи повернув getNamedItem('id') значення, відмінне від null. Якщо атрибут id присутній, ми виводимо його значення в консоль, інакше - повідомлення про відсутність цього атрибута.

Однак, слід пам'ятати, що getNamedItem() є застарілим методом і в сучасному JavaScript існують більш зручні та гнучкі способи роботи з атрибутами елементів. Наприклад, можна використовувати властивість dataset для зберігання та отримання даних, пов'язаних з елементом, або методи getAttribute() та setAttribute() для безпосереднього доступу до атрибутів.

Розглянемо приклад використання dataset:

const div = document.createElement('div');
div.dataset.id = 'myDiv';
div.dataset.class = 'myClass';

console.log(div.dataset.id); // Виведе 'myDiv'
console.log(div.dataset.class); // Виведе 'myClass'

У цьому прикладі ми створюємо новий div елемент і встановлюємо його властивості data-id та data-class за допомогою властивості dataset. Потім ми можемо отримати ці значення, звертаючись до відповідних властивостей dataset.

Також можна використовувати методи getAttribute() та setAttribute():

const div = document.createElement('div');
div.setAttribute('id', 'myDiv');
div.setAttribute('class', 'myClass');

console.log(div.getAttribute('id')); // Виведе 'myDiv'
console.log(div.getAttribute('class')); // Виведе 'myClass'

У цьому прикладі ми створюємо новий div елемент і встановлюємо його атрибути id та class за допомогою методу setAttribute(). Потім ми можемо отримати значення цих атрибутів за допомогою методу getAttribute().

Хоча getNamedItem() все ще може бути корисним у певних ситуаціях, наприклад, при роботі з існуючими XML/HTML документами, в цілому рекомендується використовувати сучасніші та більш зручні методи роботи з атрибутами та даними елементів, такі як dataset, getAttribute() та setAttribute().

Синтаксис

getNamedItem(name)

Параметри

*name

Рядок із назвою бажаного атрибута.

Return

Attr

Повертає об'єкт Attr, що відповідає наданому ім'я, або null, якщо жоден не знайдено.

Переглядачі

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

Приклади

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

// Отримуємо перший елемент div на сторінці
const div = document.getElementsByTagName('div')[0];

// Отримуємо атрибут id цього елемента
const idAttr = div.attributes.getNamedItem('id');

// Виводимо значення атрибута id в консоль
console.log(idAttr.value);

// Отримуємо всі елементи div на сторінці
const divs = document.getElementsByTagName('div');

// Проходимо циклом по всіх div елементах
for (let i = 0; i < divs.length; i++) {
  const div = divs[i];

  // Отримуємо атрибут data-role для поточного div елемента
  const roleAttr = div.attributes.getNamedItem('data-role');

  // Якщо атрибут data-role присутній
  if (roleAttr) {
    const role = roleAttr.value;

    // Виконуємо різні дії залежно від значення атрибута
    switch (role) {
      case 'header':
        div.style.backgroundColor = 'lightgray';
        break;
      case 'content':
        div.style.padding = '10px';
        break;
      case 'footer':
        div.style.textAlign = 'center';
        break;
    }
  }
}