JavaScript MutationObserver.observe() — стежити за змінами DOM

Метод observe() починає стежити за змінами вузла. Другим аргументом — що саме стежити.

правити

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

Опції обов'язкові, і це навмисно: виклик без жодної з них (childList, attributes, characterData) кидає TypeError. Спостерігач не вгадуватиме твої наміри.

Опція subtree: true поширює спостереження на всіх нащадків — без неї стежимо лише за безпосередніми дітьми.

Ще дві корисні: attributeFilter звужує стеження до конкретних атрибутів (не варто ловити всі), а attributeOldValue додає в запис попереднє значення — інакше ти знатимеш, що атрибут змінився, але не знатимеш, з чого.

правити

Нотатка

Виклик без опцій кидає TypeError. Треба явно сказати, що стежити — принаймні одне з childList, attributes, characterData.

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

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

Переглядачі

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

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

Переглядач
observe	26+	14+	7+	15+	12+	11+

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

Переглядач
observe	4.4+	yes	yes	7+

Приклади

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

<div id="watched" class="stara">Спостережуваний елемент</div>

const element = document.getElementById('watched');

const observer = new MutationObserver(mutations => {
    for (const m of mutations) {
        console.log(m.attributeName, ':', m.oldValue, '→',
            m.target.getAttribute(m.attributeName));
    }
});

observer.observe(element, {
    attributes: true,
    attributeFilter: ['class'],   // лише class, не всі підряд
    attributeOldValue: true,      // інакше не дізнаємось, що було
    subtree: true,                // разом із нащадками
});

// провокуємо запис
element.setAttribute('class', 'nova');

// без опцій — TypeError:
// observer.observe(element);