JS метод Attr.item()

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

item() є методом об'єкта NamedNodeMap, який повертає вузол (node) за його порядковим індексом у колекції атрибутів елемента. Цей метод часто використовується для отримання атрибутів елементів у документах XML або HTML.

Метод item() приймає один аргумент - число, яке представляє індекс атрибута, що потрібно отримати. Індекси починаються з 0, тому item(0) поверне перший атрибут елемента, item(1) - другий атрибут і так далі.

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

const div = document.getElementsByTagName('div')[0];
const firstAttr = div.attributes.item(0);
console.log(firstAttr.name); // Виведе ім'я першого атрибута div елемента

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

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

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

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

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

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

Однак, item() може бути корисним, якщо ви не знаєте імен атрибутів або потрібно отримати всі атрибути елемента в певному порядку. Наприклад, якщо ви працюєте з XML-документом і потрібно обробити всі атрибути певного елемента, item() може бути зручним способом отримати їх.

Ще один приклад використання item():

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

// Отримуємо href атрибут
const hrefAttr = attrs.getNamedItem('href');
console.log(hrefAttr.value); // Виведе значення href атрибута

// Отримуємо target атрибут
const targetAttr = attrs.item(attrs.length - 1);
console.log(targetAttr.name, targetAttr.value); // Виведе ім'я та значення останнього атрибута

У цьому прикладі ми отримуємо перший a елемент на сторінці та його атрибути. Спочатку ми використовуємо getNamedItem('href') для отримання значення атрибута href. Потім ми використовуємо item(attrs.length - 1) для отримання останнього атрибута елемента (припускаючи, що target є останнім атрибутом). Ми виводимо ім'я та значення цього атрибута в консоль.

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

Наприклад, можна переписати попередній приклад з використанням getAttribute() та setAttribute():

const link = document.getElementsByTagName('a')[0];

// Отримуємо href атрибут
const hrefValue = link.getAttribute('href');
console.log(hrefValue);

// Встановлюємо target атрибут
link.setAttribute('target', '_blank');

У цьому прикладі ми отримуємо значення атрибута href за допомогою getAttribute('href'), а потім встановлюємо нове значення для атрибута target за допомогою setAttribute('target', '_blank').

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

Синтаксис

item(index)

Параметри

*index

Позиція атрибута, який потрібно повернути.

Return

Attr

Повертає елемент типу Attr за вказаним індексом або null, якщо індекс виходить за межі.

Переглядачі

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

Приклади

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

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

// Отримуємо перший атрибут цього елемента
const firstAttr = div.attributes.item(0);

// Виводимо ім'я першого атрибута в консоль
console.log(firstAttr.name);

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

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

  // Отримуємо атрибут data-role
  const roleAttr = attrs.getNamedItem('data-role');
  const role = roleAttr ? roleAttr.value : 'default';

  // Отримуємо атрибут data-color
  const colorAttr = attrs.item(attrs.length - 1);
  const color = colorAttr && colorAttr.name === 'data-color' ? colorAttr.value : 'black';

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