MutationObserver()

callback

주어진 노드 또는 하위 트리와 옵션을 만족하는 DOM 변경을 감지하면 호출할 콜백입니다.

callback 함수는 두 개의 매개변수를 받습니다.

1. 일어난 변경 각각을 나타내는 MutationRecord 객체들의 배열
2. 콜백을 호출한 MutationObserver

아래의 예제에서 더 자세히 확인하세요.

DOM 변경이 발생하면 지정한 callback을 호출하는 MutationObserver 객체입니다.

이 예제는 노드와 그 자식들을 주시하여 요소가 트리에 추가되거나 트리에서 제거되는 경우, 그리고 요소의 특성이 변경되는 경우를 감지하는 새로운 MutationObserver를 생성합니다.

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch (mutation.type) {
      case "childList":
        /* 트리에 한 개 이상의 자식이 추가됐거나 제거된 경우.
           mutation.addedNodes와 mutation.removedNodes를 참고하세요. */
        break;
      case "attributes":
        /* mutation.target이 가리키는 요소의 특성이 바뀐 경우.
           특성의 이름은 mutation.attributeName으로 알 수 있고,
           이전 값은 mutation.oldValue로 알 수 있습니다. */
        break;
    }
  });
}

callback() 함수는 감지기의 observe()를 호출했을 때 지정한 설정을 만족하는 변경을 감지하면 호출됩니다.

일어난 변경의 종류(자식 목록의 변경, 특성의 변경)는 mutation.type (en-US) 속성을 통해 알 수 있습니다.

실제로 감지 절차를 시작하는 코드는 다음과 같습니다.

const targetNode = document.querySelector("#someElement");
const observerOptions = {
  childList: true,
  attributes: true,

  // false를 지정하거나 아예 생략하여 부모 노드의 변경만 감지
  subtree: true,
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

주시하고자 하는 하위 트리는 someElement라는 ID를 가진 요소를 통해 탐색합니다. observerOptions 레코드에는 감지기의 옵션을 설정합니다. 자식의 변경과 특성의 변경을 모두 감지하고자 하므로 childList와 attributes를 모두 true로 지정합니다.

그 다음에는 감지기 인스턴스를 생성하면서 callback() 함수를 지정하고, target 노드와 options 객체를 제공하여 observe()를 호출, 하위 트리의 변경 감지를 시작합니다.

이후 disconnect()를 호출하기 전까지는 DOM 트리의 targetNode 아래에서 새로운 요소가 추가되거나 제거되는 경우, 또는 targetNode까지 포함하여 요소 중 하나의 특성이 바뀌는 경우 callback()이 호출됩니다.