자바스크립트 HTML DOM 변경 감시 예시

코딩을 하다보면 특정 DOM의 속성 등이 변경됐는지 알고 싶을 때가 있습니다.

이 경우에 활용 가능한 객체가 있어서 소개합니다.

 

목차

 

DOM 변경 감시

다음과 같이 MutationObserver 객체를 이용하여 DOM의 변경을 감시합니다.

// 인스턴스 생성
var observer = new MutationObserver(function(mutations) {
    // 변경 감지 시 수행할 작업 기술
});

// 감시할 대상(항목) 설정
var config = {
    attributes: true,
    childList: true,
    characterData: true
};

// 감시 대상 노드
var target = document.getElementById('target');

// 감시 시작
observer.observe(target, config);

function after() {
    // 감시 중지
    observer.disconnect();
}

 

DOM 변경 감시 활용 예시

저 같은 경우는 애드센스 광고 스크립트에 의하여 자동으로 들어가는 height 정보를 제거하기 위해 사용하였습니다.

var wrapperObserver = new MutationObserver(function(mutations) {
    $('#wrapper').css('height','');
});
var config = {
    attributes: true,
    childList: true,
    characterData: true
};
var wrapper = document.getElementById('wrapper');

wrapperObserver.observe(wrapper, config);

function after() {
    wrapperObserver.disconnect();
}

 

DOM 이벤트 사용 방법

다음과 같은 간단한 방법도 있지만 잘못 사용하면 무한 루프에 빠질 수 있으니 주의 바랍니다.

$('#target').bind('DOMSubtreeModified', function () {
    // 변경 감지 시 수행할 작업
});

크롬 방침이 변경되어 MutationObserver 사용을 권장한다는 말도 있으니 가급적이면 MutationObserver 객체를 사용하는 편이 나아 보입니다.

 

도움이 되시길 바랍니다.