DOM 属性の変更を検出して対応する方法: MutationObserver と従来のメソッド?

DOM 属性変更時のイベントのトリガー

多くのシナリオでは、画像のソースや div の HTML が変更されたときなど、DOM 属性の変更を検出する必要があります。コンテンツの更新。この機能に対するブラウザのサポートは時間の経過とともに進化してきました。

DOM 変異イベント (レガシー)

以前は、DOM 変異イベントは属性の変更をリッスンする方法を提供していました。これらのイベントには次のものが含まれます:

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

ただし、ブラウザによる DOM 変異イベントのサポートに一貫性がなく、

MutationObserver API

DOM Mutation Events の代わりに、MutationObserver API が導入されました。 MutationObserver は、DOM 属性や DOM のその他の側面の変更を検出するための、より堅牢で広くサポートされている方法を提供します。

MutationObserver を使用すると、オブザーバー インスタンスを作成し、監視する変更の種類を指定できます。 DOM 内で一致する変更が発生すると、オブザーバーは通知します。

ここでは、MutationObserver を使用して画像のソース属性への変更を検出する方法の例を示します。

<code class="javascript">// Create an observer instance
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // Check if the mutation is for the "src" attribute
    if (mutation.attributeName === "src") {
      // Do something in response to the source change
    }
  }
});

// Start observing the specified target node
observer.observe(image, { attributes: true, attributeFilter: ["src"] });</code>

この例では、オブザーバーはイメージ ノードの src 属性を監視するように構成されており、その属性が変更されるたびに指定されたコールバックを呼び出します。

jQuery Mutation Events Plugin

の場合jQuery を使用している場合は、MutationObserver の代わりに Mutation Events プラグインを利用できます。このプラグインは、DOM 属性の変更を処理するための簡略化されたインターフェイスを提供し、特定の属性の変更のみに興味がある場合に役立ちます。

<code class="javascript">$(image).on("DOMAttrModified", (event) => {
  if (event.attrName === "src") {
    // Do something in response to the source change
  }
});</code>

MutationObserver または jQuery Mutation Events プラグインを利用することで、効果的に変更を検出できます。 DOM 属性で変更し、それらの変更に応じてカスタム アクションを実行します。

以上がDOM 属性の変更を検出して対応する方法: MutationObserver と従来のメソッド?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。