DOM에서 요소 추가를 감지하는 방법: 지원 중단 및 대안?

DOM에서 요소 추가 관찰

요소가 웹페이지에 추가될 때 알림을 받으려면 다음과 같은 몇 가지 접근 방식을 사용할 수 있습니다.

더 이상 사용되지 않는 돌연변이 이벤트:

이전에는 돌연변이 이벤트(예: DOMNodeInserted)를 사용하여 DOM 변경을 모니터링할 수 있었습니다. 그러나 이러한 이벤트는 이제 더 이상 사용되지 않습니다.

지속적 폴링:

낡은 접근 방식에는 setInterval()을 사용하여 원하는 요소가 있는지 정기적으로 확인하는 작업이 포함됩니다.

<code class="js">function checkDOMChange() {
  // Check for element presence...

  // Continue polling after 100 milliseconds
  setTimeout(checkDOMChange, 100);
}</code>

이는 상당한 CPU 리소스를 소비하는 비효율적인 솔루션입니다.

권장: MutationObserver

최신 브라우저는 mutation에 대한 대안을 제공하는 MutationObserver를 지원합니다. 이벤트. DOM 변경 사항을 관찰하고 요소가 추가될 때 콜백 함수를 실행할 수 있습니다.

<code class="js">const observer = new MutationObserver(mutations => {
  // Process DOM changes...
});

observer.observe(document.documentElement, { childList: true });</code>

MutationObserver를 구현하면 더 이상 사용되지 않는 돌연변이 이벤트의 제한이나 지속적인 폴링의 비효율성 없이 DOM 추가를 효과적으로 모니터링할 수 있습니다. .

위 내용은 DOM에서 요소 추가를 감지하는 방법: 지원 중단 및 대안?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!