javascript

MutationObserver로 DOM 변화 감지

hjcode 2021. 12. 7. 10:40

MutationObserver 는 DOM의 변화를 감시합니다.
특정 Node를 target으로 정해 observe 함수를 실행하여 감시하다가 
해당 target에 변경이 일어나면 대상 node의 변화된 정보를 가져옵니다.

 

// 대상 node 선택
const target = document.getElementById('id');

// 감시자 인스턴스 만들기
const observer = new MutationObserver(mutations => {
  mutations.forEach(m => {
    console.log(m);
  });
});

// 감시자 설정
const config = { 
	attributes: true, 
	childList: true, 
	characterData: true 
}

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

// 감시 종료
observer.disconnect();

 

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

 

MutationObserver - Web APIs | MDN

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.

developer.mozilla.org

 

반응형