JavaScript で DOM の変更を検出して対応するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript で DOM の変更を検出して対応するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-15 01:54:09

オリジナル

682 人が閲覧しました

How Can I Detect and Respond to DOM Changes in JavaScript?

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

ログイン後にコピー

例: 入力の追加の検出

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

ログイン後にコピー

ディビジョン>または HTML に追加されます。実際の例を次に示します:

以上がJavaScript で DOM の変更を検出して対応するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。