JS метод Attr.setNamedItem()

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

setNamedItem() є методом об'єкту NamedNodeMap, який представляє колекцію атрибутів елемента в DOM (Document Object Model). Цей метод використовується для встановлення або заміни значення існуючого атрибута елемента або додавання нового атрибута. Він є корисним інструментом для динамічного маніпулювання атрибутами елементів у JavaScript.

Для використання методу setNamedItem() необхідно спочатку створити новий об'єкт Attr за допомогою методу createAttribute() або отримати існуючий об'єкт Attr з колекції attributes елемента. Наприклад, припустимо, що ми маємо таку HTML-розмітку:

<div id="myDiv" class="my-class"></div>

Щоб додати новий атрибут data-value з значенням 42 до цього елемента, ми можемо використати наступний код:

const div = document.getElementById('myDiv');
const attrs = div.attributes;
const newAttr = document.createAttribute('data-value');
newAttr.value = '42';
attrs.setNamedItem(newAttr);

У цьому прикладі ми спочатку отримуємо посилання на елемент div за його id. Потім ми отримуємо колекцію attributes цього елемента та створюємо новий об'єкт Attr за допомогою document.createAttribute('data-value'). Ми встановлюємо значення цього атрибута на '42' за допомогою властивості value. Нарешті, ми додаємо новий атрибут до колекції attributes за допомогою методу setNamedItem(newAttr).

Метод setNamedItem() також може бути використаний для заміни значення існуючого атрибута. Наприклад:

const div = document.getElementById('myDiv');
const attrs = div.attributes;
const classAttr = attrs.getNamedItem('class');
classAttr.value = 'new-class';
attrs.setNamedItem(classAttr);

У цьому прикладі ми спочатку отримуємо об'єкт Attr для атрибута class за допомогою attrs.getNamedItem('class'). Потім ми змінюємо значення цього атрибута на 'new-class' за допомогою властивості value. Нарешті, ми замінюємо існуючий атрибут class на новий за допомогою attrs.setNamedItem(classAttr).

Метод setNamedItem() також може бути корисним у циклах або інших ітераційних конструкціях, де потрібно додати або змінити кілька атрибутів елемента. Наприклад:

const div = document.getElementById('myDiv');
const attrs = div.attributes;

const dataAttrs = [
  { name: 'data-value', value: '42' },
  { name: 'data-visible', value: 'true' },
  { name: 'data-type', value: 'string' }
];

for (const attr of dataAttrs) {
  const newAttr = document.createAttribute(attr.name);
  newAttr.value = attr.value;
  attrs.setNamedItem(newAttr);
}

У цьому прикладі ми маємо масив об'єктів dataAttrs, що представляють атрибути, які ми хочемо додати до елемента div. Ми ітеруємо через цей масив за допомогою циклу for...of та для кожного атрибута створюємо новий об'єкт Attr за допомогою document.createAttribute(attr.name). Потім ми встановлюємо значення цього атрибута на attr.value та додаємо його до колекції attributes за допомогою attrs.setNamedItem(newAttr).

Загалом, метод Attr: setNamedItem() є потужним інструментом для маніпулювання атрибутами елементів у JavaScript. Він дозволяє додавати нові атрибути, змінювати значення існуючих атрибутів та працювати з колекцією attributes елемента. Використовуючи цей метод разом з іншими методами маніпулювання DOM, ви можете створювати більш гнучкі та динамічні веб-додатки.

Синтаксис

setNamedItem(attr)

Параметри

*attr

Атрибут, який потрібно вставити у колекцію.

Return

Attr

Повертає старий атрибут, якщо він був замінений, або null, якщо атрибут є новим. Це дозволяє користувачу контролювати заміну атрибутів та визначати, чи були вони успішно вставлені у колекцію.

Переглядачі

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

Приклади

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

function setDataAttributes(className, dataAttrs) {
  const elements = document.getElementsByClassName(className);

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const attrs = element.attributes;

    for (const attr of dataAttrs) {
      const newAttr = document.createAttribute(attr.name);
      newAttr.value = attr.value;
      const existingAttr = attrs.getNamedItem(attr.name);

      if (existingAttr) {
        attrs.setNamedItem(newAttr);
      } else {
        attrs.setNamedItem(newAttr);
      }
    }
  }
}

const div = document.getElementById('myDiv');
const attrs = div.attributes;
const newAttr = document.createAttribute('data-value');
newAttr.value = '42';
attrs.setNamedItem(newAttr);