DOM 변경 사항을 효과적으로 감지

DOM의 변경 사항을 관찰하는 것은 사용자 상호 작용에 응답하는 동적 웹 애플리케이션을 만드는 데 중요합니다. 널리 사용되는 접근 방식 중 하나는 DOM 수정을 감시할 수 있는 최신 API인 MutationObserver를 활용하는 것입니다. 이 접근 방식은 IE11, Firefox 및 WebKit을 포함한 대부분의 최신 브라우저에서 지원됩니다.

이를 구현하려면 다음 단계를 사용할 수 있습니다.

var observeDOM = (function() {
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  return function(obj, callback) {
    if (!obj || obj.nodeType !== 1) {
      return;
    }

    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    } else if (window.addEventListener) { // browser support fallback
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

이 함수는 요소(obj)와 콜백 함수(callback)를 인수로 사용합니다. 콜백은 요소나 해당 하위 항목이 변경될 때마다 실행됩니다.

사용법을 보여주기 위해 다음 예를 고려하세요.

  
list item (click to delete)

이 예에서는 다음을 보여줍니다.

• 목록에 항목 추가
• 목록에서 항목 제거
• 사용 MutationObserver는 목록의 변경 사항을 감지합니다. 이는 UI 수정, 백엔드 데이터 업데이트 등 다양한 작업을 수행하는 데 사용할 수 있습니다.