JS метод Element.setAttributeNode()

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

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

Для використання setAttributeNode() спочатку потрібно створити об'єкт Attr за допомогою методу document.createAttribute(). Наприклад:

const attr = document.createAttribute('class');
attr.value = 'new-class';

Тут ми створили об'єкт Attr для атрибута class зі значенням new-class.

Після того, як об'єкт Attr створений, ми можемо встановити його як атрибут елемента за допомогою методу setAttributeNode():

const element = document.getElementById('myElement');
element.setAttributeNode(attr);

Цей код встановлює атрибут class зі значенням new-class для елемента з ідентифікатором myElement.

Одна з переваг використання setAttributeNode() полягає в тому, що він дозволяє встановлювати додаткові властивості атрибута, такі як prefix (префікс атрибута), namespaceURI (URI простору імен атрибута) та ownerElement (елемент, якому належить атрибут). Наприклад:

const attr = document.createAttributeNS('http://www.example.com/ns', 'ex:myAttr');
attr.value = 'attribute-value';
const element = document.getElementById('myElement');
element.setAttributeNode(attr);

У цьому прикладі ми створили атрибут ex:myAttr у просторі імен http://www.example.com/ns зі значенням attribute-value та встановили його для елемента myElement.

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

const attr1 = document.createAttribute('class');
attr1.value = 'old-class';
const attr2 = document.createAttribute('class');
attr2.value = 'new-class';
const element = document.getElementById('myElement');
element.setAttributeNode(attr1);
element.setAttributeNode(attr2); // Замінює старий атрибут 'class' на новий

Загалом, Element.setAttributeNode() є більш гнучким і потужним методом для маніпулювання атрибутами HTML-елементів порівняно з setAttribute(). Він дозволяє працювати з об'єктами Attr, встановлювати додаткові властивості атрибутів та замінювати існуючі атрибути новими. Однак, для більшості простих випадків використання setAttribute() може бути достатнім і зручнішим.

Порада:	Перш ніж використовувати `setAttributeNode()`, переконайтеся, що ви створили об'єкт `Attr` за допомогою методу `document.createAttribute()`. Наприклад: `const newAttr = document.createAttribute('class'); newAttr.value = 'my-class';`.
Порада:	Якщо ви хочете замінити існуючий атрибут елемента, спочатку видаліть його за допомогою методу `removeAttributeNode()`. Наприклад: `element.removeAttributeNode(element.getAttributeNode('class'));`. Це дозволить уникнути помилок при спробі додати дублікат атрибута.
Порада:	Пам'ятайте, що метод `setAttributeNode()` повертає вузол атрибута, який був замінений або `null`, якщо атрибут був доданий вперше. Ви можете зберегти повернений вузол атрибута для подальшого використання або видалення. Наприклад: `const oldAttr = element.setAttributeNode(newAttr);`.

Синтаксис

setAttributeNode(attribute)

Параметри

Return

Переглядачі

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

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

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

Приклади

Цей приклад демонструє використання методу setAttributeNode() для динамічного додавання та видалення атрибутів CSS до елемента абзацу на основі стану чекбоксів. Користувач може динамічно змінювати стиль тексту в абзаці, вмикаючи або вимикаючи чекбокси. Метод setAttributeNode() використовується для додавання нових атрибутів CSS до елемента, а removeAttributeNode() - для видалення існуючих атрибутів.

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/gOyGJrE">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо метод setAttributeNode() для додавання нового атрибута до елемента. Це може бути корисно для динамічного встановлення властивостей елементів або створення нових атрибутів.

const link = document.getElementById('myLink');
const newAttr = document.createAttribute('target');
newAttr.value = '_blank';

// Додаємо новий атрибут target зі значенням '_blank' до посилання
link.setAttributeNode(newAttr);

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

const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input');

const toggleInputsDisabled = (disabled) => {
  inputs.forEach((input) => {
    const disabledAttr = document.createAttribute('disabled');
    disabledAttr.value = disabled;

    if (disabled) {
      // Додаємо атрибут disabled до елемента input
      input.setAttributeNode(disabledAttr);
    } else {
      // Видаляємо атрибут disabled з елемента input
      const currentDisabledAttr = input.getAttributeNode('disabled');
      if (currentDisabledAttr) {
        input.removeAttributeNode(currentDisabledAttr);
      }
    }
  });
};

JS довідник

JavaScript

Наповнення JS розділу