MutationEvent

非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

MutationEvent インターフェイスは、 Document Object Model (DOM) の階層とノードの変更に特化したイベントプロパティを提供します。

メモ: mutation イベントを使用するのは問題があります。

  • 設計上の欠陥があります。
  • 文書に DOM の mutation リスナーを追加すると、その文書に対するその後の DOM 変更のパフォーマンスが著しく低下します（1.5 倍から 7 倍も遅くなります）。さらに、リスナーを削除してもダメージは元に戻りません。
  • クロスブラウザー互換性が低いです。 Safari は DOMAttrModified に対応しておらず（WebKit のバグ 8191 を参照）、Firefox は mutation name イベント（DOMElementNameChanged や DOMAttributeNameChanged など）に対応していません。

これらは非推奨になり、変異オブザーバーに置き換えられました。こちらの使用を検討してください。

インスタンスプロパティ

このインターフェイスには親である UIEvent と、間接的に Event から継承したプロパティがあります。

MutationEvent.attrChange 読取専用

どのような変更が DOMAttrModified イベントのトリガーとなったかを示します。これは MODIFICATION (1)、ADDITION (2)、REMOVAL (3)のいずれかです。他のイベントに対しては意味を持たず、 0 に設定されます。

MutationEvent.attrName 読取専用

DOMAttrModified イベントの影響を受けるノードの名前を示します。他のイベントでは意味を持たず、空文字列 ("") に設定されます。

MutationEvent.newValue 読取専用

DOMAttrModified イベントでは、変更された Attr ノードの新しい値が格納されます。 DOMCharacterDataModified イベントでは、変更された CharacterData ノードの新しい値を返します。それ以外の場合は、空文字列 ("") を返します。

MutationEvent.prevValue 読取専用

DOMAttrModified イベントでは、変更前の Attr ノードの値が格納されます。 DOMCharacterDataModified イベントでは、変更された CharacterData ノードの新しい値を返します。それ以外の場合は、空文字列 ("") を返します。

MutationEvent.relatedNode 読取専用

DOMSubtreeModified のサブツリー内の変更されたノードのように、イベントに関連するノードを示します。

インスタンスメソッド

MutationEvent.initMutationEvent()

コンストラクターメソッドで、与えられた引数で構成された新しい MutationEvent を返します。

変異イベント一覧

以下はすべての変異イベントの一覧です。

  • DOMAttrModified （Safari では未対応）
  • DOMAttributeNameChanged （Firefox では未対応）
  • DOMCharacterDataModified
  • DOMElementNameChanged （Firefox では未対応）
  • DOMNodeInserted
  • DOMNodeInsertedIntoDocument
  • DOMNodeRemoved
  • DOMNodeRemovedFromDocument
  • DOMSubtreeModified

例

変異イベントのリスナーは、 EventTarget.addEventListener() を使って以下のように登録できます。

js
element.addEventListener(
  "DOMNodeInserted",
  (event) => {
    // …
  },
  false,
);

仕様書

No specification found

No specification data found for api.MutationEvent.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性

BCD tables only load in the browser

関連情報