DOM 内の属性の変更を検出するにはどうすればよいですか?

DOM 内の属性変更の検出

質問:

HTML 要素の属性が変更されたときのイベント (カスタム イベントなど)具体的には、image () 要素の src 属性、または Division (

) 要素の innerHTML 属性が変更されたとき?

答え:

ミューテーション イベント (非推奨)

歴史的には、DOM ミューテーション イベントは属性の変更を監視するために使用されてきました。ただし、2012 年以降非推奨になりました。その代替となる MutationObserver が推奨されます。

MutationObserver

MutationObserver は、DOM への変更を監視できる高度な API です。 。 Mutation Events よりもきめ細かい制御が提供され、特定の要素、突然変異、およびツリー構造を追跡できます。

MutationObserver の例:

<code class="javascript">// Create a new MutationObserver instance
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // Check if the mutation is an attribute change
    if (mutation.type === "attributes") {
      console.log(`Attribute changed on ${mutation.target.nodeName}`);
    }
  }
});

// Start observing the document body for attribute changes
observer.observe(document.body, { attributes: true });</code>

jQuery イベント プラグイン

jQuery の Mutation Events プラグインは、属性の変更を検出するために使用することもできます。基本的なユースケース向けの使いやすい API を提供します。

jQuery Mutation Events Plugin を使用した例:

<code class="javascript">$("img").on("attrchange", (e) => {
  console.log(`Image src changed to ${e.target.src}`);
});</code>

注:

DOM ミューテーション イベントに対するブラウザのサポートはさまざまです。この機能に依存する前に、互換性を確認することを常にお勧めします。

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