Written by nodejs-style
on 2021-12-22

자바스크립트 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 정보를 제거하기 위해 사용하였습니다.

DOM 이벤트 사용 방법

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

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

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

도움이 되시길 바랍니다.

반응형

from http://sangminem.tistory.com/715 by ccl(A) rewrite - 2021-12-22 01:01:14

Top