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() є корисним для роботи з атрибутами в XML/HTML документах, у сучасному JavaScript існують більш зручні альтернативи, такі як getAttribute(), setAttribute() та dataset. Рекомендується використовувати їх замість getNamedItem() для нових проєктів або при роботі з DOM безпосередньо.

Порада:

Якщо getNamedItem() повертає null, це означає, що елемент не має атрибута із заданим іменем. Тому рекомендується завжди перевіряти результат на null перед подальшою обробкою. Наприклад: const idAttr = element.attributes.getNamedItem('id'); if (idAttr) { /* робота з атрибутом */ }.

Синтаксис

getNamedItem(name)

Параметри

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

Return

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

Переглядачі

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

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

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

Приклади

У цьому прикладі ми маємо поле вводу для введення імені атрибута та кнопку "Отримати атрибут". Коли користувач натискає на кнопку, ми викликаємо getNamedItem() з введеним іменем атрибута на демонстраційному div елементі. Якщо атрибут знайдено, ми виводимо його значення та, якщо це атрибут data-color, змінюємо колір тексту div елемента на вказане значення. Якщо атрибут не знайдено, ми виводимо відповідне повідомлення.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/bGJJmdo">
  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>.

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

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

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

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

У цьому прикладі ми перевіряємо наявність атрибута data-role у всіх елементах div на сторінці та виконуємо певні дії залежно від значення цього атрибута. Це демонструє використання getNamedItem() у циклі та поєднання його з іншими операціями над атрибутами.

// Отримуємо всі елементи 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;
    }
  }
}

JS довідник

Events

JavaScript

Statements