JavaScript에서 DOM 변경 사항을 효율적으로 감지하고 대응하려면 어떻게 해야 합니까?

DOM 변경 감지

DOM 변경 감지는 실시간 이벤트에 응답하는 동적 웹 애플리케이션을 만드는 데 매우 중요합니다. 일반적인 시나리오 중 하나는 DIV 또는 입력과 같은 요소가 문서에 추가될 때 함수를 실행하는 것입니다.

MutationObserver를 사용한 솔루션

DOM 변경 사항을 관찰하기 위해 선호되는 접근 방식은 MutationObserver 인터페이스. DOM의 특정 노드에 대한 변경 사항을 모니터링하는 안정적이고 효율적인 방법을 제공합니다.

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);
    }
  }
})();

// Example usage to observe a list element:
observeDOM(listEl, function(m) {
   var addedNodes = [], removedNodes = [];

   m.forEach(record => record.addedNodes.length & addedNodes.push(...record.addedNodes));

   m.forEach(record => record.removedNodes.length & removedNodes.push(...record.removedNodes));

   console.log('Added:', addedNodes, 'Removed:', removedNodes);
});

이 예에서 관찰DOM 함수는 노드(이 경우 목록 요소)와 콜백 함수를 사용합니다. MutationObserver 인터페이스를 사용하여 목록 요소의 하위 노드에 대한 변경 사항을 관찰합니다. 변경이 발생하면 추가 및 제거된 노드에 대한 정보로 콜백 함수가 실행됩니다.

대체 접근 방법

MutationObserver가 대상 브라우저에서 지원되지 않는 경우 fallback 옵션 include:

• DOMNodeInserted 및 DOMNodeRemoved 이벤트는 관찰 중인 요소에 직접 연결할 수 있습니다.
• setInterval 주기적으로 변경 사항을 확인하는 기능입니다. 효율적입니다.

위 내용은 JavaScript에서 DOM 변경 사항을 효율적으로 감지하고 대응하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!