Wykrywanie zmian DOM z pomocą obserwatorów mutacji

Paul Kinlan

W 2000 roku stworzono Mutation Event API, który ma ułatwić programistom reagowanie na zmiany w DOM (np.DOMNodeRemoved, DOMAttrModified itp.).

Ta funkcja nie była powszechnie używana przez programistów internetowych, ale stanowiła bardzo wygodny i popularny przypadek użycia dla rozszerzeń do Chrome, gdy chcieli wykonywać pewne działania, gdy coś się zmieniło na stronie.

Zdarzenia mutacji są przydatne, ale jednocześnie wiążą się z pewnymi problemami z wydajnością. Zdarzenia są powolne i są uruchamiane zbyt często w sposób synchroniczny, co powoduje wystąpienie niepożądanych błędów w przeglądarce.

Obserwacje mutacji DOM wprowadzone w specyfikacji DOM4 zastąpią zdarzenia mutacji. Podczas gdy zdarzenia mutacji uruchamiały powolne zdarzenia dla każdej zmiany, Obserwatorzy mutacji działają szybciej, korzystając z funkcji wywołań zwrotnych, które można dostarczyć po wielu zmianach w DOM.

Możesz ręcznie obsługiwać listę zmian oferowanych przez interfejs API lub skorzystać z biblioteki takiej jak Podsumowanie zmian, która ułatwia wykonanie zadania i zwiększa wiarygodność zmian wprowadzonych w DOM.

Możesz zacząć używać Obserwatorów mutacji w Chrome Beta, aby wykrywać zmiany w DOM i przygotować się do użycia tego narzędzia w przypadku wersji stabilnej (Chrome 18). Jeśli obecnie używasz wycofanych zdarzeń mutacji, po prostu przejdź na platformę Obserwatorzy mutacji.

Oto przykład listy wstawionych węzłów ze zdarzeniami mutacji:

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

Tak wygląda to 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);