🌐 MutationObserver - DOM의 변화를 감시

MutationObserver

동적으로 페이지를 구성할 때 페이지의 변경여부를 실시간으로 확인해야 하는 경우가 있다. 예를 들어, ajax로 DOM 엘리먼트를 추가/삭제 할 경우 그 변화를 감지해야 한다.

옛날에는 DOMSubtreeModified 를 많이 사용했었지만 DOMSubtreeModified을 잘못 사용하면 무한루프에 빠지기 떄문에 성능을 저해해서 DOM 이벤트 표준에서 지원이 중단되었다. setTimeout이나 setInterval을 사용하여 주기적으로 체크하는 방법도 있지만, 그것보다는 대체로 사용할 수 있는 것이 MutationObserver다.

MutationObserver는 DOM의 변화를 주기적으로 감시한다. DOM의 속성, 텍스트, 자식 노드들에 대한 변경을 감지할 수 있다.

---

MutationObserver 사용법

// 1. 주기적으로 감지할 대상 요소 선정
const target = document.getElementById('id');

// 2. 옵저버 콜백 생성
const callback = (mutationList, observer) => {
  console.log(mutationList);
};

// 3. 옵저버 인스턴스 생성
const observer = new MutationObserver(callback); // 타겟에 변화가 일어나면 콜백함수를 실행하게 된다.

// 4. DOM의 어떤 부분을 감시할지를 옵션 설정
const config = { 
    attributes: true, // 속성 변화 할때 감지
    childList: true, // 자식노드 추가/제거 감지
    characterData: true // 데이터 변경전 내용 기록
};

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

// 6. 감지 중지
observer.disconnect();

변경을 감지할 엘리먼트 대상을 선정할때, 변경되는 자식들의 가장 상위 부모 요소를 골라야한다. 그렇지 않으면 돔 변화 감지가 안된다.

---

MutationObserver 콜백 인자

const callback = (mutationList, observer) => {
  console.log(mutationList, observer);
};

 

첫번째 파라미터

콜백 함수는 첫번째 파라미터로 변경 사항을 표현하는 객체 형태의 배열을 받는다.

• type : 변경사항의 타입. 'attributes', 'characterData', childList' 중 하나의 값을 가진다.
  "attributes" - 속성이 변경됨
  "characterData" - 데이터 변경시 (text node)
  "childList" - 자식 노드가 추가되거나 제거됨
• target : 변경사항이 발생한 타겟 노드
• addedNodes/removedNodes : 추가되거나 제거된 노드
• previousSibling/nextSibling : 추가되거나 제거된 노드의 previous/next 형제 노드
• attributeName/attributeNamespace : 변경된 속성의 이름
• oldValue : 변경 이전의 값. 속성이나 텍스트가 변경되었을 경우, attributeOldValue/characterDataOldValue 옵션을 주었을 경우에 받아올 수 있다.

 

두번째 파라미터

두번째 파라미터로는 observer 객체 자신을 받을 수 있다.

---

MutationObserver 옵션 종류

이 옵션의 설정에 따라 mutations이 여러 번 실행될 수 있으므로, 성능 최적화를 위해 가능하면 필요한 것만 정확하게 설정을 부여하는 것이 좋다.

속성	값	설명
childList	true / false	대상 노드의 하위 요소의 추가 및 제거를 감시합니다.
attributes	true / false	대상 노드의 속성에 대한 변화를 감시합니다.
characterData	true / false	대상 노드의 데이터에 대한 변화를 감시합니다.
subtree	true / false	대상 노드의 자식 뿐만 아니라 손자 이후로 모두 감시합니다.
attributeOldValue	true / false	대상 노드의 속성 변경 전의 내용도 기록에 남깁니다.
characterDataOldValue	true / false	대상 노드의 데이터 변경 전의 내용도 기록에 남깁니다.
attributeFilter	[ "A", "B" ]	모든 속성 돌연변이를 관찰 할 필요가 없는 경우 속성 네임 스페이스없이 속성 로컬 이름의 배열로 설정 합니다.

---

이외의 브라우저 감지 인터페이스들

• IntersectionObserver : 루트 영역(뷰포트)와 대상 객체의 겹침을 감시
• MutationObserver : 객체의 속성 변경을 감시
• PerformanceObserver : 프로세스 성능 모니터링
• ReportingObserver : 웹 사이트의 표준 및 정책 준수 현황을 감시
• ResizeObserver : 객체의 너비, 높이의 변화를 감시

---

# 참고자료

https://www.zerocho.com/category/HTML&DOM/post/5be24eacdb0c31001c4c5040

https://velog.io/@ggong/MutationObserver