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';.

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

Порада

Якщо ви хочете замінити існуючий атрибут елемента, спочатку видаліть його за допомогою методу removeAttributeNode(). Наприклад: element.removeAttributeNode(element.getAttributeNode('class'));. Це дозволить уникнути помилок при спробі додати дублікат атрибута.

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

Порада

Пам'ятайте, що метод setAttributeNode() повертає вузол атрибута, який був замінений або null, якщо атрибут був доданий вперше. Ви можете зберегти повернений вузол атрибута для подальшого використання або видалення. Наприклад: const oldAttr = element.setAttributeNode(newAttr);.

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

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

Синтаксис

setAttributeNode(attribute)

Переглядачі

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

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

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

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

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

Приклади

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

<a id="myLink" href="#demo">Посилання для прикладу</a>

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

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

<form id="myForm">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>
<input type="text" value="текст для прикладу">

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

<header>
  <h2 class="title">Element: setAttributeNode() method</h2>
  <p class="description">Додає або змінює атрибут елемента.</p>
</header>
<main>
  <div class="result">
    <div id="container">
      <p id="paragraph">Цей текст можна зробити курсивом або напівжирним.</p>
    </div>
    <div>
      <label>
        <input type="checkbox" id="italicCheckbox"> Курсив
      </label>
      <label>
        <input type="checkbox" id="boldCheckbox"> Напівжирний
      </label>
    </div>
  </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);
}

const paragraph = document.getElementById('paragraph');
const italicCheckbox = document.getElementById('italicCheckbox');
const boldCheckbox = document.getElementById('boldCheckbox');

const toggleAttribute = (attribute, value) => {
  const attr = document.createAttribute(attribute);
  attr.value = value;

  const currentAttr = paragraph.getAttributeNode(attribute);
  if (currentAttr) {
    paragraph.removeAttributeNode(currentAttr);
  }

  paragraph.setAttributeNode(attr);
};

italicCheckbox.addEventListener('change', () => {
  toggleAttribute('style', italicCheckbox.checked ? 'font-style: italic;' : '');
});

boldCheckbox.addEventListener('change', () => {
  toggleAttribute('style', boldCheckbox.checked ? 'font-weight: bold;' : '');
});
//# sourceURL=pen.js