Skip to content

MutationObserver

MutationObserver 인터페이스는 DOM 트리의 변경을 감지하는 기능을 제공합니다. DOM3 이벤트 명세의 일부였던 Mutation Events를 대체합니다.

인스턴스 메서드

disconnect()

observe()를 호출하기 전까지 MutationObserver 인스턴스가 더이상의 알림을 수신하지 않도록 설정합니다.

observe(target, options)

주어진 설정과 일치하는 DOM 변경이 발생했을 때 MutationObserver 인스턴스가 자신의 콜백으로 알림을 수신하도록 설정합니다.

target
DOM 트리 내에서 변경을 감지할 노드 또는 하위 트리 루트로서의 Node입니다. (Element 포함)
options
주시하고자 하는 DOM 변경을 나타내는 객체입니다. 이 옵션을 만족하는 DOM 변경들만 MutationObserver의 콜백으로 전달됩니다.
적어도 childList, attributes, characterData 중 하나는 true여야 하며 세 속성 모두 false면 TypeError가 발생합니다.

사용 가능한 옵션은 다음과 같습니다.

  • subtree - true로 지정하면 target이 루트인 하위 트리 전체를 주시합니다. 다른 옵션들도 target 노드 하나가 아니라 이 하위 트리에 속한 모든 노드에 대해 적용됩니다. 기본 값은 false입니다.
  • childList - true로 지정하면 대상 노드에 자식이 추가되거나 기존 자식이 제거되는 것을 감지합니다. subtree가 true면 자손들의 자식 변경도 감지합니다. 기본 값은 false입니다.
  • attributes - true로 지정하면 주시 중인 노드 또는 노드들의 특성 변경을 감지합니다. 기본 값은 attributeFilter 또는 attributeOldValue가 지정된 경우 true, 아니면 false입니다.
  • attributeFilter - 변경을 감지할 특성 이름의 배열입니다. 이 속성을 지정하지 않으면 모든 특성의 변경이 알림을 생성합니다.
  • attributeOldValue - true로 지정하면 노드의 특성 변경을 감지했을 때 해당 특성이 바뀌기 전 값을 기록합니다. 기본 값은 false입니다.
  • characterData - true로 지정하면 대상 노드 내의 텍스트가 바뀌는 것을 감지합니다. subtree가 true면 자손들의 텍스트 변경도 감지합니다. 기본 값은 characterDataOldValue가 지정된 경우 true, 아니면 false입니다.
  • characterDataOldValue - true로 지정하면 노드의 텍스트 변경을 감지했을 때 바뀌기 전의 텍스트를 기록합니다. 기본 값은 false입니다.

takeRecords()

MutationObserver의 알림 큐를 비우고, 큐에서 대기 중이던 알림들은 MutationRecord들로 구성된 새로운 Array로 반환합니다.

Example 

// 변경을 감지할 노드 선택
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();

See also

Favorite site