DOM의 변화를 감시하는 javascript MutationObserver

Tistory같은 경우 스킨을 만들때 내가 모든 Event를 통제 할 수 없기 때문에 DOM의 변화를 감지하는 javascript 장치가 필요합니다. 옛날에는 DOMSubtreeModified 를 많이 사용했었지만 DOMSubtreeModified을 잘못 사용하면 무한루프에 빠지기 떄문에 성능을 저해해서 DOM 이벤트 표준에서 지원이 중단되었습니다.

그래서 대체로 사용할 수 있는 것이 MutationObserver입니다. MutationObserver 는 DOM의 변화를 감시합니다.

기본 사용법

가장 기본적인 사용법은 아래와 같습니다. 상세한 설정은 config를 통해 할 수 있습니다.

// 1. 대상 선정
var target = document.getElementById('some-id');

// 2. 옵저버 인스턴스 생성
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });    
});

// 3. 옵션 설정
var config = { 
    attributes: true, 
    childList: true,
     characterData: true 
};

// 4. 실행
observer.observe(target, config);

1. 일단 감시를 할 타겟인 DOM을 지정 합니다.
2. 매인인 옵저버 인스턴스를 생성합니다. 타겟에 변화가 일어나면 여기에서 표시됩니다. 지금은 console.log(mutation);가 표시 됩니다.
3. DOM의 어떤 부분을 감시할지를 설정합니다. 자식 node가 추가되거나 속성이 변경되거나 글씨가 변경되는 등의 감시를 합니다.
4. 실제로 실행을 시켜 줍니다.

옵저버의 실행을 중지시킬 수 있습니다.

observer.disconnect();

옵션 설정

아래와 같이 사용한 옵션은 여러가지가 있습니다. 이 옵션의 설정에 따라 mutations이 여러 번 실행될 수 있으므로 가능하면 정확환 설정이 좋습니다.

var config = { 
    attributes: true, 
    childList: true,
     characterData: true 
};

아래는 모든 옵션의 속성값입니다.

속성	값	설명
childList	true / false	대상 노드의 하위 요소의 추가 및 제거를 감시합니다.
attributes	true / false	대상 노드의 속성에 대한 변화를 감시합니다.
characterData	true / false	대상 노드의 데이터에 대한 변화를 감시합니다.
subtree	true / false	대상 노드의 자식 뿐만 아니라 손자 이후로 모두 감시합니다.
attributeOldValue	true / false	대상 노드의 속성 변경 전의 내용도 기록에 남깁니다.
characterDataOldValue	true / false	대상 노드의 데이터 변경 전의 내용도 기록에 남깁니다.
attributeFilter	[ "A", "B" ]	모든 속성 돌연변이를 관찰 할 필요가 없는 경우 속성 네임 스페이스없이 속성 로컬 이름의 배열로 설정 합니다.

브라우저 호환성

해당 기술들은 비교적 최신 기술이기 때문에 IE의 지원은 11버전부터 됩니다.

Feature	크롬	파이어폭스 (Gecko)	인터넷 익스플로러	오페라	사파리
기본 지원	18, 26 -webkit	14 (14)	11	15	6.0 -webkit