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(attribute)

Параметри

Return

Переглядачі

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

Приклади

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

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

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

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);
      }
    }
  });
};