JavaScript에서 DOM 변경을 어떻게 감지하고 대응할 수 있나요?

DOM 변경 감지

다양한 방법을 사용하여 DOM(문서 개체 모델)의 변경 사항을 감지할 수 있습니다.

1. MutationObserver(최신 브라우저)

const observer = new MutationObserver((mutations) => {
  // Process mutations here...
});

observer.observe(targetElement, { childList: true, subtree: true });

2. 돌연변이 이벤트(더 이상 사용되지 않지만 여전히 지원됨)

targetElement.addEventListener('DOMNodeInserted', (event) => {
  // Node added
});

targetElement.addEventListener('DOMNodeRemoved', (event) => {
  // Node removed
});

예: 입력 추가 감지

< div> 또는 <입력> HTML에 추가되었습니다. 실제 예는 다음과 같습니다.

const targetElement = document.getElementById('element-to-monitor');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      const addedNodes = mutation.addedNodes;

      Array.from(addedNodes).forEach((node) => {
        if (node.nodeName === 'DIV' || node.nodeName === 'INPUT') {
          // Execute your function here...
        }
      });
    }
  });
});

observer.observe(targetElement, { childList: true, subtree: true });

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