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

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

Patricia Arquette

リリース： 2024-10-26 16:59:03

オリジナル

509 人が閲覧しました

How can I detect Attribute Changes in the 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 サイトの他の関連記事を参照してください。