setTimeout 과 clearTimeout 을 사용하여 간단하게 smartresize 기능 만들기
2015-08-04
[소소한 개발 일지] DOM 변화 감지하기(MutationObserver)
2020-07-05
Explanation
오늘은 소소한 개발 일지의 두번째 포스팅입니다!
저는 틈틈이 취미로 웨일 확장프로그램을 만들고 있는데요, 만들다가 DOM의 변화를 확인해야 하는 일이 있었어요.
그리고 오늘은 그 이야기를 적어보려 합니다.
저가 처음 생각한 방법은 body의 innerHTML 값을 Sha1로 해시해서 캐시하고 setInterval로 일정 시간을 간격으로 새로운 Body의 html 해시값과 비교하는 방법이었습니다.
sha1 해시는 자바스크립트 내장으로 있지 않아서,
저는 https://github.com/emn178/js-sha1를 사용하였습니다.
대충 예를 들면 아래와 같은 방법이었답니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//import sha1 from './sha1.js'; const callback = () => { console.log('DOM changed'); }; let cachHash = ''; setInterval(() => { const newHash = sha1(window.document.body.innerHTML); if(cachHash !== newHash) { cachHash = newHash; callback(); } }, 500); |
setInterval을 사용하는 것도, body의 값을 매번 해시해서 비교하는 것도 왠지 좋은 방법은 아닌 거 같았답니다.
그리고 DOM 변화를 감지한다는 게 내장 함수로 있을 거 같아서 좀 알아봤어요.
역시나 있었답니다.
참고링크 : https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
참고 링크를 예제를 보시면 아래와 같아요.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// 변화를 감지할 노드를 선택합니다. const targetNode = document.getElementById('some-id'); // 변화 감지 설정입니다. const config = { attributes: true, childList: true, subtree: true }; // 옵션 설명 // - childList : 대상 노드의 하위 요소가 추가되거나 제거되는 것을 감지합니다. // - attributes : 대상 노드의 속성 변화를 감지합니다. // - characterData : 대상 노드의 데이터 변화를 감지합니다. // - subtree : 대상의 하위의 하위의 요소들까지의 변화를 감지합니다. // - attributeOldValue : 변화 이전의 속성 값을 기록합니다. // - characterDataOldValue : 변화 이전의 데이터 값을 기록합니다. // - attributeFilter : 모든 속성의 변화를 감지할 필요가 없는 경우 속성을 배열로 설정합니다. // 변화가 감지될 때 실행할 콜백 함수 const callback = function(mutationsList, observer) { // 참고로 'for ...of' 문은 IE 11에서 동작하지 않습니다. for(let mutation of mutationsList) { if (mutation.type === 'childList') { // 자식 노드가 추가되거나 제거되었습니다. console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { // mutation.attributeName 속성이 수정되었습니다. console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } }; // 콜백 함수가 연결된 옵저버 인스턴스를 생성합니다. const observer = new MutationObserver(callback); // 선택한 노드의 변화 감지를 시작합니다. observer.observe(targetNode, config); // 아래와 같이, 나중에 관찰을 멈출 수 있습니다. observer.disconnect(); |
마지막으로 MutationObserver의 호환성 참고 링크입니다.
https://caniuse.com/#search=MutationObserver
