변형 관찰자를 사용하여 DOM 변경사항 감지

Paul Kinlan

2000년에는 개발자가 DOM (예: DOMNodeRemoved, DOMAttrModified 등)의 변경사항에 쉽게 반응할 수 있도록 Mutation Events API가 지정되었습니다.

이 기능은 웹 개발자에 의해 널리 사용되지는 않았지만, 페이지의 내용이 변경될 때 작업을 수행하고자 할 때 Chrome 확장 프로그램에 대해 매우 편리하고 널리 사용되는 사용 사례가 되었습니다.

변형 이벤트는 유용하지만 동시에 성능 문제를 일으킵니다. 이벤트가 느리고 동기식으로 너무 자주 실행되어 원치 않는 브라우저 버그가 발생합니다.

DOM4 사양에 도입된 DOM 변형 관찰자가 변형 이벤트를 대체합니다. Mutation Events는 변경할 때마다 느린 이벤트를 발생시키는 반면, Mutation Observer는 DOM을 여러 번 변경한 후에 전달할 수 있는 콜백 함수를 사용하여 속도가 더 빠릅니다.

API가 제공하는 변경사항 목록을 수동으로 처리하거나 변형 요약과 같은 라이브러리를 사용하면 이 작업을 더 쉽게 수행하고 DOM에서 발생한 변경사항에 대한 안정성 레이어를 추가할 수 있습니다.

Chrome 베타에서 변형 관찰자를 사용하면 DOM의 변경사항을 감지하고 안정화 버전 (Chrome 18)에서 이를 사용할 수 있습니다. 현재 지원 중단된 변형 이벤트를 사용 중인 경우 변형 관찰자로 이전하면 됩니다.

다음은 변형 이벤트와 함께 삽입된 노드를 나열하는 예입니다.

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

Mutation Observers에서는 다음과 같이 표시됩니다.

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);