MutationEvent

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

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

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

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

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

インスタンスプロパティ

このインターフェイスには親である 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.

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MutationEvent
DeprecatedNon-standard
attrChange
DeprecatedNon-standard
attrName
DeprecatedNon-standard
initMutationEvent
DeprecatedNon-standard
newValue
DeprecatedNon-standard
prevValue
DeprecatedNon-standard
relatedNode
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

関連情報