[소소한 개발 일지] DOM 변화 감지하기 (MutationObserver)

Explanation

오늘은 소소한 개발 일지의 두번째 포스팅입니다!
저는 틈틈이 취미로 웨일 확장프로그램을 만들고 있는데요, 만들다가 DOM의 변화를 확인해야 하는 일이 있었어요.
그리고 오늘은 그 이야기를 적어보려 합니다.

1. 처음 생각한 방법

저가 처음 생각한 방법은 body의 innerHTML 값을 Sha1로 해시해서 캐시하고 setInterval로 일정 시간을 간격으로 새로운 Body의 html 해시값과 비교하는 방법이었습니다.

sha1 해시는 자바스크립트 내장으로 있지 않아서,
저는 https://github.com/emn178/js-sha1를 사용하였습니다.

대충 예를 들면 아래와 같은 방법이었답니다.

2. 새로 알게 된 방법

setInterval을 사용하는 것도, body의 값을 매번 해시해서 비교하는 것도 왠지 좋은 방법은 아닌 거 같았답니다.
그리고 DOM 변화를 감지한다는 게 내장 함수로 있을 거 같아서 좀 알아봤어요.

역시나 있었답니다.
참고링크 : https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

참고 링크를 예제를 보시면 아래와 같아요.

마지막으로 MutationObserver의 호환성 참고 링크입니다.
https://caniuse.com/#search=MutationObserver

Leave a Reply