JS властивість Attr.specified

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

specified є властивістю об'єкту Attr у DOM (Document Object Model), яка вказує, чи був атрибут явно встановлений у вихідному коді HTML, чи був доданий або змінений програмно за допомогою JavaScript. Ця властивість повертає логічне значення true, якщо атрибут був встановлений у вихідному коді HTML, та false, якщо атрибут був доданий або змінений програмно.

Властивість specified може бути корисною в різних сценаріях, наприклад, для відстеження змін у атрибутах елементів або для перевірки, чи був атрибут встановлений за замовчуванням браузером. Розглянемо кілька прикладів використання цієї властивості.

Припустимо, що ми маємо таку HTML-розмітку:

<div id="myDiv" class="my-class" data-value="42"></div>

Ми можемо отримати атрибути цього елемента та перевірити значення властивості specified для кожного атрибута:

const div = document.getElementById('myDiv');
const attrs = div.attributes;

for (let i = 0; i < attrs.length; i++) {
  const attr = attrs[i];
  console.log(`Атрибут "${attr.name}": specified = ${attr.specified}`);
}

Цей код виведе:

Атрибут "id": specified = true
Атрибут "class": specified = true
Атрибут "data-value": specified = true

Як ми бачимо, всі атрибути мають значення specified = true, оскільки вони були встановлені у вихідному коді HTML.

Тепер розглянемо приклад, де ми додаємо атрибут програмно за допомогою JavaScript:

const div = document.getElementById('myDiv');
div.setAttribute('data-visible', 'true');
const visibleAttr = div.attributes.getNamedItem('data-visible');
console.log(`Атрибут "${visibleAttr.name}": specified = ${visibleAttr.specified}`);

У цьому випадку ми додаємо новий атрибут data-visible до елемента div за допомогою методу setAttribute(). Коли ми отримуємо об'єкт Attr для цього атрибута та перевіряємо значення властивості specified, ми побачимо:

Атрибут "data-visible": specified = false

Це означає, що атрибут data-visible був доданий програмно, а не встановлений у вихідному коді HTML.

Властивість specified також може бути корисною для відстеження змін у атрибутах елементів. Наприклад, припустимо, що ми маємо форму, де користувач може вводити значення для певного атрибута. Ми можемо використати властивість specified для перевірки, чи було змінено значення атрибута:

<div id="myDiv" data-value="42"></div>
<input type="text" id="valueInput">
<button id="updateBtn">Оновити значення</button>

const div = document.getElementById('myDiv');
const valueInput = document.getElementById('valueInput');
const updateBtn = document.getElementById('updateBtn');

const valueAttr = div.attributes.getNamedItem('data-value');
const initialValue = valueAttr.value;

updateBtn.addEventListener('click', () => {
  const newValue = valueInput.value.trim();
  if (newValue !== initialValue) {
    valueAttr.value = newValue;
    console.log(`Атрибут "data-value" було змінено: specified = ${valueAttr.specified}`);
  }
});

У цьому прикладі ми маємо елемент div з атрибутом data-value, текстове поле input та кнопку "Оновити значення". Коли користувач натискає кнопку, ми отримуємо нове значення з текстового поля та порівнюємо його з початковим значенням атрибута data-value. Якщо значення відрізняються, ми встановлюємо нове значення атрибута та виводимо повідомлення в консоль, вказуючи значення властивості specified для цього атрибута.

Якщо атрибут був встановлений у вихідному коді HTML, його значення specified буде true. Однак, після зміни значення атрибута програмно, його значення specified стане false, вказуючи на те, що атрибут був змінений програмно.

Загалом, властивість Attr: specified є невеликою, але корисною деталлю DOM, яка дозволяє відрізняти атрибути, встановлені у вихідному коді HTML, від атрибутів, доданих або змінених програмно за допомогою JavaScript. Ця властивість може бути використана в різних сценаріях, таких як відстеження змін атрибутів, налагодження коду та перевірка коректності встановлення атрибутів.

правити

Порада

Властивість specified також може бути корисною для налагодження та відстеження змін у атрибутах під час розробки веб-додатків. Наприклад, ви можете використовувати її для перевірки, чи були атрибути встановлені коректно після певних операцій маніпулювання DOM.

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

Порада

Слід зазначити, що властивість specified не є критично важливою для більшості веб-додатків і часто використовується лише для спеціальних цілей або під час налагодження коду. В основному, розробники більше зосереджуються на маніпулюванні атрибутами за допомогою методів, таких як setAttribute(), removeAttribute() та hasAttribute(), ніж на використанні властивості specified.

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

Порада

Використання цієї властивості не рекомендується. Хоча вона може підтримуватись деякими браузерами, її можуть вилучити з веб-стандартів або зберігати лише для забезпечення зворотної сумісності. Рекомендується уникати її використання. Детальнішу інформацію щодо сумісності можна знайти у таблиці сумісності.

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

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

Синтаксис

Attr.specified

Переглядачі

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

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

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

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

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

Приклади

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

<div id="myDiv">Демонстраційний елемент</div>

const div = document.getElementById('myDiv');
const attrs = div.attributes;

for (let i = 0; i < attrs.length; i++) {
  const attr = attrs[i];
  console.log(`Атрибут "${attr.name}": specified = ${attr.specified}`);
}

function trackAttributeChanges(element, attrName) {
  const attr = element.attributes.getNamedItem(attrName);
  const initialValue = attr.value;
  const initialSpecified = attr.specified;

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === attrName) {
        const newValue = attr.value;
        const newSpecified = attr.specified;

        if (newValue !== initialValue && !newSpecified) {
          console.log(`Атрибут "${attrName}" було змінено програмно на "${newValue}".`);
        }
      }
    });
  });

  observer.observe(element, { attributes: true });
}