프로그래밍 & 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 객체를 사용하는 편이 나아 보입니다.

     

    도움이 되시길 바랍니다.

    반응형
    그리드형(광고전용)

    댓글2

    • 알 수 없는 사용자 2022.03.22 14:09

      안녕하세요 티스토리 렌더링 차단 리소스를 줄이는 방법 알려주세요ㅠㅠ mutation observer 사용해서 indexof 쓰면 된다는데 잘 모르겠어요
      답글

      • 아미넴 2022.03.23 07:44 신고

        안녕하세요. 직접 처음부터 끝까지 손수 만든 웹이 아니라 누군가 만들어 놓은 블로그 서비스를 이용하기 때문에 로드되는 리소스를 제어하는건 한계가 있어 보입니다.

    💲 추천 글