보통 자바스크립트 프레임워크를 사용해서 개발할 때에는 DOM을 직접 다루지 않아도 모든 요소를 제어할 수 있기 떄문에 거의 사용할 일이 없는 API이다. 하지만 플러그인이나 확장 기능 개발과 같이 직접 제어할 수 없는 부분의 영향을 받는다면 더할 나위 없이 유용한 API이다. 회사의 제품 중에 주피터랩의 플러그인 형태로 개발된 링크(Link)가 있는데 확장 기능이다 보니 제어할 수 없는 주피터의 화면을 이용해야 하는 경우가 있었다. 이 API를 사용하면 폴링(setInterval)이나 지연시간(setTimeout)을 활용할 때와는 다르게 아주 깔끔하게 개발 할 수 있다. 원래는 비슷한 기능을 하는 MutationEvent가 있었는데 성능상의 문제로 다시 개발되었다고 한다. 나온지도 10년 정도 되었는데 그동안 모르고 있었다.

사용 방법은 변경을 감지하는 옵저버를 만들고 이 옵저버가 특정 요소를 지켜보게 하면 된다. 옵저버는 콜백 함수를 받게 되고 이 콜백 함수는 변경 사항 목록을 받게 된다. 이 변경 사항에 따라서 동작할 내용을 콜백 함수 안에 구현하면 된다. MDN의 예제를 참조하면 좋다.

무엇을 감지하는 지가 핵심이라고 생각되는데 속성(attributes)이나 글자(characterData), 자식 목록(childList)의 변경 사항을 감지할 수 있다. MutationObserver API 글에는 더 많은데 MDN에는 3개만 명시되어 있다. 옵저버를 특정 요소에 걸어줄 때 어느 부분을 감지할지 지정하도록 되어 있다. 지정하지 않으면 오류가 발생한다. 다음은 어떤 상황에서 해당 변경사항이 발생하는지 확인할 수 있는 예제이다.

type외의 다른 속성은 MutationRecord에 잘 나와 있다. observer.disconnect()를 사용해서 감지를 중지할 수 있다. 성능이 아주 중요하다면 감지를 중지한 다음에 takeRecords()를 이용해서 미처리된 사항을 정리할 수 있게 되어 있다. 보통 UI 제어는 class를 사용하니 attributes 감지를 사용하고 변경사항에 따라 classList.contains( String ) 정도를 사용하면 충분하다.