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

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)를 사용합니다. ) 및 콜백 함수(콜백)를 인수로 사용합니다. 콜백은 요소나 그 하위 항목이 변경될 때마다 실행됩니다.

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

<ol>
  <li><button>list item (click to delete)</button></li>
</ol>

<script>
  // add item
  var itemHTML = '<li><button>list item (click to delete)</button></li>';
  var listEl = document.querySelector('ol');

  // delete item
  listEl.onclick = function(e) {
    if (e.target.nodeName == 'BUTTON') {
      e.target.parentNode.parentNode.removeChild(e.target.parentNode);
    }
  };

  // Observe a specific DOM 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.clear();
    console.log('Added:', addedNodes, 'Removed:', removedNodes);
  });
</script>

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

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

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