DOM Tree 변경 감지하기

발생일: 2013.12.29

키워드: MutationObserver, DOM 감시, DOM 변경, 변경 추적

문제:

네이버 뉴스 사용자 댓글 간편보기 익스텐션(http://ohgyun.github.io/naver-news-user-comments-viewer/)을 만들었다.

뉴스 목록이 있고 간편보기 버튼이 각 엘리먼트의 옆에 붙어있는 UI이다.

이 버튼은 페이지가 로드된 후에 붙이도록 했는데, 뉴스를 ‘더보기’로 불러온 경우에도 버튼이 붙도록 처리가 필요했다.

특정 엘리먼트의 DOM Tree 변경을 감지하고 있다가, 렌더링할면 될 것 같다.

어떻게 하면 될까?

해결책:

검색해보니, DOM Tree 변경 감시를 위한 `MutationObserver`라는 API가 있다.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

이 API는 테크니컬 리뷰 단계의 API이고, 사용하기엔 좀 복잡하더라.

사용해보기도 했는데, 어떤 버그 때문인지 브라우저가 행 걸리는 문제가 있었다.

이보다 간단한 API로, `DOMSubtreeModified`가 있다.

http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified

가이드엔 deprecated 되었다고 나와있지만, 사용하기 간단하기도 하고 잘 동작도 해서 현재는 이 아이를 쓰고 있다.

적용한 코드는 아래 부분이다.

https://github.com/ohgyun/naver-news-user-comments-viewer/blob/master/src/coffee/cscript/cscript_main.coffee#L45

단순히 부모 엘리먼트에 `DOMSubtreeModified` 할당해두는 걸로 해결했다.