Wykrywanie zmian DOM z pomocą obserwatorów mutacji

Paul Kinlan

W 2000 roku został opracowany interfejs Mutation Events API, aby ułatwić deweloperom reagowanie na zmiany w DOM (np.DOMNodeRemoved, DOMAttrModified itp.).

Ta funkcja nie była powszechnie używana przez programistów, ale była bardzo wygodna i popularna w przypadku rozszerzeń Chrome, które miały wykonywać jakieś działanie po zmianie na stronie.

Zdarzenia mutacji są przydatne, ale jednocześnie powodują pewne problemy z wydajnością. Zdarzenia są powolne i wyzwalane zbyt często w sposób synchroniczny, co powoduje pewne niepożądane błędy w przeglądarce.

Obserwatorzy mutacji DOM, wprowadzone w specyfikacji DOM4, zastąpią zdarzenia mutacji. Zdarzenia zmiany wywołują powolne zdarzenia po każdej zmianie, ale obserwatorzy zmian działają szybciej, ponieważ korzystają z funkcji wywołania zwrotnego, które mogą być wykonywane po wielu zmianach w DOM.

Możesz ręcznie zarządzać listą zmian oferowanych przez interfejs API lub użyć biblioteki takiej jak Mutation Summary, która ułatwia to zadanie i dodaje warstwę niezawodności w przypadku zmian wprowadzonych w DOM.

Możesz zacząć używać obserwatorów mutacji w Chrome Beta, aby wykrywać zmiany w DOM i być gotowy do korzystania z nich w wersji stabilnej (Chrome 18). Jeśli obecnie używasz przestarzałych zdarzeń mutacji, przeprowadź migrację na obserwatorów mutacji.

Oto przykład wyświetlania wstawionych węzłów za pomocą zdarzeń mutacji:

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
    insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

A tak to wygląda w przypadku obserwatorów mutacji:

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
        insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document.documentElement, { childList: true });
console.log(insertedNodes);