DOM에 추가된 요소를 어떻게 감지하고 대응할 수 있나요?

추가된 요소에 대한 DOM 변경 감지

소개

DOM(문서 개체 모델)의 변경에 대응하려면 개발자가 함수를 실행해야 하는 경우가 많습니다. 요소가 HTML에 추가될 때. 이 기사에서는 MutationObserver를 사용하여 최신 브라우저에서 작동하는 고급 접근 방식과 레거시 브라우저에 대한 대체 방법을 모두 제공하는 솔루션을 제공합니다.

고급 접근 방식: MutationObserver

MutationObserver는 다음을 수행할 수 있는 API입니다. DOM의 특정 변경 사항을 관찰하고 이에 응답합니다. 추가된 요소를 감지하기 위해 관찰DOM(obj, callback)이 사용됩니다. 여기서 obj는 대상 요소이고 콜백은 변경 시 실행되는 함수입니다. 다음은 코드 조각입니다.

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

  return function(obj, callback) {
    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    }
    // Fallback for legacy browsers
    else if (window.addEventListener) {
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

observeDOM을 활용하려면 관찰할 DOM 요소와 MutationRecord 개체 배열을 수신하는 콜백을 제공하세요. 각 MutationRecord는 DOM의 변경 사항을 나타내며 DOM에서 추가 및 제거된 노드를 추출할 수 있습니다.

예제 및 데모

다음은 항목이 추가되거나 제거될 때 콜백이 트리거되는 간단한 예입니다. 목록 요소에서 제거됨:

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

이 기사와 함께 DOM 요소가 추가되거나 추가될 때 콘솔 로그를 표시하는 라이브 데모가 제공됩니다. 제거되어 DOM 변경 사항을 관찰하는 기능을 보여줍니다.

위 내용은 DOM에 추가된 요소를 어떻게 감지하고 대응할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!