프로그래밍 & IT 정보/Javascript

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

아미넴 2021. 12. 22.
반응형

코딩을 하다보면 특정 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 객체를 사용하는 편이 나아 보입니다.

     

    도움이 되시길 바랍니다.

    반응형

    댓글

    💲 추천 글