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

Paul Kinlan

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

이 기능은 웹 개발자들에게 널리 사용되지는 않았지만 페이지의 내용이 변경될 때 어떤 작업을 실행하려는 경우 Chrome 확장 프로그램에 매우 편리하고 인기 있는 사용 사례를 제공했습니다.

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

DOM4 사양에서 도입된 DOM 변형 관찰자가 변형 이벤트를 대체합니다. 변형 이벤트는 모든 단일 변경사항에 대해 느린 이벤트를 실행하는 반면, 변형 관찰자는 DOM에서 여러 번 변경된 후에 전송될 수 있는 콜백 함수를 사용하여 더 빠릅니다.

API에서 제공하는 변경사항 목록을 수동으로 처리하거나 Mutation Summary와 같은 라이브러리를 사용하여 이 작업을 더 쉽게 하고 DOM에서 발생한 변경사항에 관한 신뢰성 레이어를 추가할 수 있습니다.

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

다음은 변형 이벤트를 사용하여 삽입된 노드를 나열하는 예입니다.

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

다음은 Mutation Observer를 사용한 예입니다.

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