DOMSubtreeModified을 대체할 수 있는 MutationObserver

 

 동적으로 페이지를 구성할 때 페이지의 변경여부를 실시간으로 확인해야 하는 경우가 있습니다. 그럴때 DOMSubtreeModified을 사용하게 됩니다. 그런데 크롬에서 방침이 변경되어 DOMSubtreeModified을 대체하여 사용하여야 합니다. setTimeout이나 setInterval을 사용하여 주기적으로 체크하는 방법도 있지만, 그것보다는 MutationObserver을 이용해서 기존의 기능을 대체하는 것이 좋습니다.

 MutationObserver의 설정법 및 사용방법을 정리해 보겠습니다.

 

 

설정순서를 정리 해 보겠습니다.

1. MutationObserver 생성

var observer = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
		concole.log(mutation);
	});
});

메인인 Observer을 생성한 후 지정한 객체에서 변동사항이 생길 경우 console.log(mutation)이 표시됩니다.

 

2. config 설정

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

지정한 객체의 어떤부분이 변하는지를 확인하기 위해 설정하는 부분입니다.

childList는 target 노드의 요소들의 변화를 감지합니다.

attributes는 target의 속성 변화를 감지합니다.

최소한 childList, attributes 또는 characterData는 true로 설정해야 하며, 그렇지 않으면 오류가 발생할 수도 있습니다.

 

3. MutationObserver 실행

observer.observe(document.getElementById('input_ajax'), { childList: true });

형식은 observer.observe(타겟, config); 의 형태입니다.

위의 예시에서는 타겟 및 config를 포함하여 실행하였습니다.

 

4. MutationObserver 종료

observer.disconnect();

실행중인 MutationObserver는 위의 명령어를 사용하여 종료할 수 있습니다.

 

위의 설정을 통합하면

observer = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
		console.log(mutation);
	});
});
observer.observe(document.getElementById('input_ajax'), { childList: true });

이렇게 간단한 명령만으로 실행할 수 있습니다. ajax를 이용한 동적인 변화가 많은 페이지에서 매우 유용한 기능이니 사용에 참조하시기 바랍니다.

 

아래에는 config 설정을 위한 옵션의 속성을 추가해 놓았습니다.

속성	값	설명
childList	true or false	대상의 하위요소 추가, 제거 관찰
attributes	true or false	대상의 속성 변화 관찰
characterData	true or false	대상의 데이터에 대한 변화 관찰
subtree	true or false	대상의 모든 하위요소(자식, 손자 등)
attributeOldValue	true or false	대상의 속성 변화 전의 내용을 기록에 추가(attribute 기록 전 내용 추가)
characterDataOldValue	true or false	대상의 데이터에 변화전의 데이터를 기록에 추가 (characterData 기록 전 내용 추가)
attributeFilter	true or false	모든 속성을 관찰 할 필요가 없을 때, 속성 로컬 이름(네임 스페이스 없음)의 배열로 설정