JavaScript MutationObserver — стеження за змінами DOM

MutationObserver повідомляє про зміни в DOM: додані чи видалені вузли, змінені атрибути, змінений текст.

правити

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

Потрібен там, де зміни робить не твій код: сторонній віджет, чужий скрипт, редагований вміст. Свої зміни ти й так бачиш — а от коли розмітку переписує хтось інший, дізнатись про це можна лише так.

Спостерігач збирає зміни пачками і віддає їх одним викликом — на відміну від старих mutation-подій, які били на кожну дрібницю й через це були настільки повільними, що їх викинули зі стандарту.

У налаштуваннях кажеш, що саме стежити: childList (діти), attributes (атрибути), characterData (текст), і чи заглядати вглиб — subtree.

правити

Нотатка

Легко вистрелити собі в ногу: якщо всередині обробника змінювати той самий DOM, спостерігач покличе себе знову — і вийде нескінченний цикл. На час своїх змін його вимикають (disconnect()).

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

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

Синтаксис

const observer = new MutationObserver(callback);\nobserver.observe(node, config);

методи

Переглядачі

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

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

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

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

Переглядач
	4.4	26	14	7

Приклади

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

<ul id="list"></ul>

const list = document.getElementById('list');

const observer = new MutationObserver(mutations => {
    for (const mutation of mutations) {
        if (mutation.type === 'childList') {
            console.log('Додано:', mutation.addedNodes.length);
            console.log('Видалено:', mutation.removedNodes.length);
        }

        if (mutation.type === 'attributes') {
            console.log('Змінено атрибут', mutation.attributeName);
        }
    }
});

observer.observe(list, {
    childList: true,
    attributes: true,
    subtree: true, // разом із нащадками
});

// хтось (не ми) додає елемент — ми про це дізнаємось
list.append(document.createElement('li'));

// коли більше не треба
// observer.disconnect();