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() для оптимізації продуктивності, видаляючи непотрібні атрибути з елементів, які більше не використовуються. Це може зменшити розмір DOM і покращити швидкодію додатку. Однак, будьте обережні, щоб не видалити важливі атрибути випадково.

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

Порада

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

const element = document.getElementById('myElement');
const attrNode = element.getAttributeNode('data-role');
if (attrNode) {
  const removedAttr = element.removeAttributeNode(attrNode);
  // Виконати операції з removedAttr
}

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

Порада

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

const element = document.getElementById('myElement');
element.removeAttribute('data-obsolete');

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

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

Синтаксис

removeAttributeNode(attributeNode)

Параметри

attributeNode

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

автор: Bond

правити

Повернення

Attr

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

Переглядач
	-	-

Приклади

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

<input type="text" id="input-field" value="текст для прикладу" placeholder="Введи щось">
<button id="enable-btn">Увімкнути</button>

// Знаходимо елемент 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>
    <li data-product-id="101">Клавіатура</li>
    <li data-product-id="102">Миша</li>
</ul>
<button id="strip">Прибрати артикули</button>

document.getElementById('strip').addEventListener('click', () => {
    document.querySelectorAll('li[data-product-id]').forEach(item => {
        const attr = item.getAttributeNode('data-product-id');

        if (attr) {
            item.removeAttributeNode(attr);
        }
    });

    console.log('Атрибути знято:', document.querySelector('ul').innerHTML.trim());
});