From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/mutationobserver/index.html | 210 +++++++++++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 files/ja/web/api/mutationobserver/index.html (limited to 'files/ja/web/api/mutationobserver/index.html') diff --git a/files/ja/web/api/mutationobserver/index.html b/files/ja/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..b4cfeb514b --- /dev/null +++ b/files/ja/web/api/mutationobserver/index.html @@ -0,0 +1,210 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - API + - Advan + - DOM + - DOM Reference + - NeedsContent + - NeedsUpdate + - Reference +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM WHATWG")}}

+ +

MutationObserver とは、指定したコールバック関数を DOM の変更時に実行させる API です。この API は、DOM3 Events の仕様で定義されていた Mutation Events を新しく設計し直したものです。

+ +

{{英語版章題("Constructor")}}

+ +

コンストラクタ

+ +

MutationObserver()

+ +

DOM の変更を検知するオブザーバを生成します。

+ +
MutationObserver(
+  function callback
+);
+
+ +
引数
+ +
+
callback
+
DOM の変更時に呼び出される関数です。この関数は第 1 引数に {{domxref("MutationRecord")}} の配列を、第 2 引数に MutationObserver インスタンス自身を受け取ります。
+
+ +

{{英語版章題("Instance medhods")}}

+ +

インスタンスメソッド

+ + + + + + + + + + + + + +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
+ +
+

補足: 引数 {{domxref("Node")}} target は NodeJS と関係ありません。

+
+ +

observe()

+ +

DOM の変更を検知したいノードを指定し、MutationObserver インスタンスを紐づけます。

+ +
void observe(
+  {{domxref("Node")}} target,
+  MutationObserverInit options
+);
+
+ +
引数
+ +
+
target
+
DOM の変更を検知したい {{domxref("Node")}}
+
options
+
取得したい変更の種類を指定する MutationObserverInit オブジェクト
+
+ +
+

補足: MutationObserver インスタンスと対象ノードを変えずに observe() を 2 回実行しても、コールバックは 1 回だけ呼び出され、また disconnect() を 2 回呼び出す必要もありません（addEventListener と同様）。しかし、別の MutationObserver インスタンスであれば、同じノードに別のオブザーバが追加されます。

+
+ +

disconnect()

+ +

MutationObserver インスタンスを対象ノードから解除します。同じインスタンスで observe() メソッドを再度呼び出すまで、オブザーバのコールバック関数は実行されません。

+ +
void disconnect();
+
+ +

takeRecords()

+ +

コールバック関数へ渡される {{domxref("MutationRecord")}} のキューを空にし、キューに入っていた値を返します。

+ +
Array takeRecords();
+
+ +
戻り値
+ +

{{domxref("MutationRecord")}} の配列。

+ +

MutationObserverInit

+ +

MutationObserverInit は以下のプロパティを指定できるオブジェクトです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ意味
childList対象ノードの子ノード（テキストノードも含む）に対する追加・削除を監視する場合は true にします。
attributes対象ノードの属性に対する変更を監視する場合は true にします。
characterData対象ノードのデータに対する変更を監視する場合は true にします。
subtree対象ノードとその子孫ノードに対する変更を監視する場合は true にします。
attributeOldValue対象ノードの変更前の属性値を記録する場合は true にします（attributes が true の時に有効）。
characterDataOldValue対象ノードの変更前のデータを記録する場合は true にします（characterData が true の時に有効）。
attributeFilterすべての属性の変更を監視する必要がない場合は、（名前空間を除いた）属性ローカル名の配列を指定します。
+ +

{{英語版章題("Example usage")}}

+ +

使用例

+ +

以下の例は このブログ記事 を参考にしたものです。

+ +
// 対象とするノードを取得
+const target = document.getElementById('some-id');
+
+// オブザーバインスタンスを作成
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    console.log(mutation.type);
+  });
+});
+
+// オブザーバの設定
+const config = { attributes: true, childList: true, characterData: true };
+
+// 対象ノードとオブザーバの設定を渡す
+observer.observe(target, config);
+
+// 後ほど、監視を中止
+observer.disconnect();
+
+ +

{{英語版章題("Additional reading")}}

+ +

関連情報

+ + + +

{{英語版章題("Specifications")}}

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }} 
+ +

{{英語版章題("Browser compatibility")}}

+ +

ブラウザ実装状況

+ +

{{Compat("api.MutationObserver")}}

+ +
+
+
 
+
+
-- cgit v1.2.3-54-g00ecf