[mozilla javascript] MutationObserver

https://developer.mozilla.org/ko/docs/Web/API/MutationObserver

MutationObserver - Web API | MDN

 

 

 

 

MuutationObserver interface는 DOM 트리 변경을 감지한다.

 

MutationObserver() << Dom 변경 발생 시 콜백을 호출하는 MutationObserver을 생성하여 반환

 

instance method

disconnect()	observe() 호출하기 전까지 callback 하지 않도록 함
observe()	주어진 설정과 일치한 dom변경에 callback 수신 설정
takeRecords()	MutationObserver 큐를 비우고 새로운 MutationRecord들로 구성된 새 Array 반환

 

 

objerve() 옵션 종류

childList	감시 대상의 자식 요소(텍스트 노드 포함)의 추가, 제거가 관찰되어야 할 경우 true로 설정
attributes	감시 대상의 속성 변화를 감시해야할 경우 true로 설정
characterData	감시 대상의 데이터(ex. p 태그의 텍스트)가 감시해야할 경우 true로 설정
subtree	감시 대상, 감시대상의 자손에 대해 감시해야할 경우 true로 설정
attributeOldValue	(attributes가 true) 감시 대상의 속성이 변경될 때 이전 속성값을 기록할 경우 true로 설정
characterDataOldValue	(characterData가 true) 감시 대상의 데이터가 변경될 때 이전 데이터값을 기록할 경우 true로 설정
attributeFilter	감시할 속성을 배열로 지정할 수 있음 (ex. attributeFilter: ['style', 'class’] )

 

// 변경을 감지할 노드 선택
const targetNode = document.getElementById("some-id");

// 감지 옵션 (감지할 변경)
const config = { attributes: true, childList: true, subtree: true };

// 변경 감지 시 실행할 콜백 함수
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("자식 노드가 추가되거나 제거됐습니다.");
    } else if (mutation.type === "attributes") {
      console.log(`${mutation.attributeName} 특성이 변경됐습니다.`);
    }
  }
};

// 콜백 함수에 연결된 감지기 인스턴스 생성
const observer = new MutationObserver(callback);

// 설정한 변경의 감지 시작
observer.observe(targetNode, config);

// 이후 감지 중단 가능
observer.disconnect();