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 безпосередньо.

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

Порада

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

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

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

Синтаксис

getNamedItem(name)

Параметри

name

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

автор: Bond

правити

Повернення

Attr

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div>перший блок</div>
<div>другий блок</div>

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

<div id="mainBlock">Демонстраційний div</div>

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

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

console.log(idAttr.value); // 'mainBlock'

<header>
  <h2 class="title">Attr: getNamedItem() method</h2>
  <p class="description">Метод, що повертає вузол (node) із заданим ім'ям атрибута або null, якщо такий вузол не знайдено.</p>
</header>
<main>
  <div class="result">
    <label>
      Введіть ім'я атрибута:
      <input type="text" id="attrName" placeholder="Наприклад, 'id'" />
    </label>
    <button id="getAttrBtn">Отримати атрибут</button>
    <p id="output"></p>
    <div id="demoDiv" data-role="header" data-color="blue">Це демонстраційний div елемент</div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

const demoDiv = document.getElementById('demoDiv');
const getAttrBtn = document.getElementById('getAttrBtn');
const output = document.getElementById('output');

getAttrBtn.addEventListener('click', () => {
  const attrName = document.getElementById('attrName').value;
  const attr = demoDiv.attributes.getNamedItem(attrName);

  if (attr) {
    output.textContent = `Значення атрибута "${attrName}": ${attr.value}`;
    if (attrName === 'data-color') {
      demoDiv.style.color = attr.value;
    }
  } else {
    output.textContent = `Елемент не має атрибута "${attrName}"`;
  }
});
//# sourceURL=pen.js