JS метод Attr.removeNamedItem()

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

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

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

<div id="myDiv" class="my-class" data-value="42"></div>

Щоб видалити атрибут class цього елемента, ми можемо використати наступний код:

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

У цьому прикладі ми спочатку отримуємо посилання на елемент div за його id. Потім ми отримуємо колекцію attributes цього елемента та викликаємо метод removeNamedItem('class') на цій колекції, передаючи назву атрибута, який потрібно видалити.

Метод removeNamedItem() також повертає видалений об'єкт Attr, що може бути корисним для подальшої обробки або перевірки успішного видалення атрибута. Наприклад:

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

if (removedAttr) {
  console.log(`Атрибут "${removedAttr.name}" було успішно видалено.`);
} else {
  console.log('Атрибут не знайдено.');
}

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

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

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

for (let i = 0; i < attrs.length; i++) {
  const attr = attrs[i];
  if (attr.name.startsWith('data-')) {
    attrs.removeNamedItem(attr.name);
    i--; // Зменшуємо лічильник, оскільки довжина колекції змінилася
  }
}

У цьому прикладі ми ітеруємо через колекцію attributes елемента div та видаляємо всі атрибути, назви яких починаються з 'data-'. Після видалення атрибута ми зменшуємо значення лічильника i на 1, оскільки довжина колекції attributes змінилася, і ми хочемо перевірити наступний атрибут у циклі.

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

правити

Порада

Важливо пам'ятати, що метод removeNamedItem() видаляє атрибут з елемента, але не змінює HTML-розмітку безпосередньо. Якщо ви хочете змінити розмітку сторінки, вам потрібно буде маніпулювати DOM безпосередньо або використовувати інші методи, такі як innerHTML або outerHTML.

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

Порада

Якщо ви хочете змінити значення атрибута, можете спочатку видалити існуючий атрибут за допомогою removeNamedItem(), а потім додати новий атрибут зі зміненим значенням за допомогою setAttribute().

const element = document.getElementById('myElement');
const attrs = element.attributes;
attrs.removeNamedItem('data-value');
element.setAttribute('data-value', '84');

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

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

Синтаксис

removeNamedItem(attrName)

Параметри

attrName

Назва атрибута, який потрібно видалити з колекції.

автор: Bond

правити

Повернення

Attr

Повертає видалений об'єкт Attr, який був успішно видалений з колекції. Цей об'єкт містить ім'я та значення атрибута, що було видалено. Якщо атрибут не було видалено (наприклад, якщо він не існує), метод повертає null.

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

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

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

if (attrs.getNamedItem('data-value')) {
  attrs.removeNamedItem('data-value');
  console.log('Атрибут data-value було видалено');
} else {
  console.log('Атрибут data-value не знайдено');
}

function removeDataAttributes(className) {
  const elements = document.getElementsByClassName(className);

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

    for (let j = 0; j < attrs.length; j++) {
      const attr = attrs[j];
      if (attr.name.startsWith('data-')) {
        attrs.removeNamedItem(attr.name);
        j--; // Зменшуємо лічильник, оскільки довжина колекції змінилася
      }
    }
  }
}

<header>
  <h2 class="title">Attr: removeNamedItem() method</h2>
  <p class="description">Видаляє атрибут елемента за його назвою.</p>
</header>
<main>
  <div class="result">
    <h3>Видалити атрибут</h3>
    <label for="attr-name">Назва атрибута:</label>
    <input type="text" id="attr-name" placeholder="Введіть назву атрибута">
    <button id="remove-attr">Видалити атрибут</button>
    <div id="target-element" style="margin-top: 10px; padding: 10px; background-color: #eee;" data-value="42" data-visible="true" class="my-class">
      Це елемент, з якого ми будемо видаляти атрибути.
    </div>
    <p id="output"></p>
  </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);
}

#target-element {
  border: 1px solid #ccc;
}

const targetElement = document.getElementById('target-element');
const outputElement = document.getElementById('output');
const removeAttrButton = document.getElementById('remove-attr');
const attrNameInput = document.getElementById('attr-name');

removeAttrButton.addEventListener('click', () => {
  const attrName = attrNameInput.value.trim();
  if (attrName) {
    const attr = targetElement.attributes.getNamedItem(attrName);
    if (attr) {
      targetElement.attributes.removeNamedItem(attrName);
      outputElement.textContent = `Атрибут "${attrName}" було видалено з елемента.`;
    } else {
      outputElement.textContent = `Атрибут "${attrName}" не знайдено в елементі.`;
    }
  }
});
//# sourceURL=pen.js