Javascript 웹 페이지의 DOM 변경 사항 감시 및 콜백 지원 (MutationObserver)

MutationObserver

웹 페이지에서 특정 요소의 스타일이 변경되거나, 새로운 요소가 추가되는 등의 DOM 변경이 발생하면,

MutationObserver는 이를 감지하고 콜백 함수를 실행

이를 통해, 실시간으로 DOM 변경을 감지하여 이에 대한 처리를 할 수 있음

 

Sample.js

// 감시할 요소 선택
const targetNode = document.getElementById('target');

// MutationObserver 생성
const observer = new MutationObserver((mutationsList, observer) => {
  for(let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('Child node has been added or removed');
    }
  }
});

// 감시할 옵션 설정
const config = { childList: true };

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

위 Sample.js 는 target 요소의 자식 요소 추가 및 삭제를 감시

 

조건은 본인이 필요한 조건에 맞춰 수정하여 사용하면 된다.

 

감시 종료 방법

observer.disconnect();