JS метод Element.removeAttributeNode()

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

Element.removeAttributeNode() - це метод JavaScript, який дозволяє видалити атрибут з елемента DOM, повертаючи його вузлове представлення. На відміну від removeAttribute(), який працює з іменами атрибутів у вигляді рядків, removeAttributeNode() приймає об'єкт Attr, що представляє атрибут. Цей метод є корисним, коли потрібно виконувати додаткові операції з видаленим атрибутом або зберегти його для подальшого використання.

Використання removeAttributeNode() вимагає кількох кроків. Спочатку потрібно отримати об'єкт Attr, який представляє атрибут, що потрібно видалити. Це можна зробити за допомогою методу getAttributeNode(). Потім можна передати цей об'єкт Attr у removeAttributeNode() для видалення атрибута з елемента.

Наприклад, припустимо, що ми маємо елемент div з атрибутом data-role="modal". Щоб видалити цей атрибут і зберегти його вузлове представлення, можна виконати наступний код:

const modalElement = document.querySelector('div[data-role="modal"]');
const roleAttr = modalElement.getAttributeNode('data-role');
const removedAttr = modalElement.removeAttributeNode(roleAttr);

У цьому прикладі ми спочатку отримуємо об'єкт Attr для атрибута data-role за допомогою getAttributeNode(). Потім ми передаємо цей об'єкт у removeAttributeNode(), який видаляє атрибут з елемента та повертає його вузлове представлення у змінну removedAttr.

Після видалення атрибута ви можете виконувати додаткові операції з його вузловим представленням. Наприклад, ви можете перевірити значення видаленого атрибута або додати його до іншого елемента:

console.log(removedAttr.value); // Виведе "modal"

const anotherElement = document.getElementById('another');
anotherElement.setAttributeNode(removedAttr);

Це може бути корисним у випадках, коли потрібно тимчасово видалити атрибут з елемента, а потім повернути його.

Важливо пам'ятати, що після видалення атрибута всі стилі, поведінка або дані, пов'язані з цим атрибутом, також будуть видалені. Тому слід обережно використовувати removeAttributeNode() та переконатися, що це не призведе до небажаних наслідків для функціональності вашого веб-додатку.

Загалом, Element.removeAttributeNode() є більш гнучким методом для видалення атрибутів, ніж removeAttribute(), оскільки він дозволяє зберегти вузлове представлення атрибута для подальшого використання. Це робить його корисним у складних сценаріях, де потрібно виконувати додаткові операції з видаленими атрибутами або тимчасово видаляти їх з елементів.

Синтаксис

removeAttributeNode(attributeNode)

Параметри

*attributeNode

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

Return

Attr

Повертає вузол атрибута, який був видалений. Цей вузол представлений об'єктом Attr, що містить інформацію про видалений атрибут, таку як його ім'я та значення. Повернений вузол атрибута може бути використаний для подальших операцій, наприклад, для додавання атрибута до іншого елемента або збереження його значення для майбутнього використання.

Переглядачі

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

Приклади

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

// Знаходимо елемент input
const inputElement = document.querySelector('#input-field');

// Знаходимо кнопку
const enableButton = document.querySelector('#enable-btn');

// Додаємо обробник події на кнопку
enableButton.addEventListener('click', () => {
  // Отримуємо атрибут disabled
  const disabledAttribute = inputElement.getAttributeNode('disabled');

  // Видаляємо атрибут disabled з елемента input
  if (disabledAttribute) {
    inputElement.removeAttributeNode(disabledAttribute);
  }
});

<ul id="product-list">
  <li data-product-id="1">Товар 1</li>
  <li data-product-id="2">Товар 2</li>
  <li data-product-id="3">Товар 3</li>
</ul>
<button id="remove-btn">Видалити</button>

<script>
// Знаходимо список товарів
const productList = document.querySelector('#product-list');

// Знаходимо кнопку "Видалити"
const removeButton = document.querySelector('#remove-btn');

// Додаємо обробник події на кнопку
removeButton.addEventListener('click', () => {
  // Знаходимо всі елементи списку
  const listItems = productList.querySelectorAll('li');

  // Ітеруємо по елементах списку та видаляємо атрибут data-product-id
  listItems.forEach(item => {
    const productIdAttribute = item.getAttributeNode('data-product-id');
    if (productIdAttribute) {
      item.removeAttributeNode(productIdAttribute);
    }
  });
});
<script>