From c3e4617c1e89b94ebfc8533dd04cb36d947d7aab Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 6 Jun 2021 00:27:39 +0900 Subject: Web/API/MutationObserver を更新 (#993) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 英語版章題マクロを削除 - 2021/05/04 時点の英語版に同期 --- files/ja/web/api/mutationobserver/index.html | 236 ++++++++------------------- 1 file changed, 67 insertions(+), 169 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/mutationobserver/index.html b/files/ja/web/api/mutationobserver/index.html index b4cfeb514b..41e6b095bf 100644 --- a/files/ja/web/api/mutationobserver/index.html +++ b/files/ja/web/api/mutationobserver/index.html @@ -3,208 +3,106 @@ title: MutationObserver slug: Web/API/MutationObserver tags: - API - - Advan - DOM - DOM Reference + - Interface + - MutationObserver - NeedsContent - NeedsUpdate - Reference + - mutation + - observers + - resize translation_of: Web/API/MutationObserver --- -

{{APIRef("DOM WHATWG")}}

+
{{APIRef("DOM WHATWG")}}
-

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

+

{{domxref("MutationObserver")}} インターフェイスは、 DOM ツリーへ変更が加えられたことを監視することができる機能を提供します。これは DOM3 Events の仕様で定義されていた Mutation Events 機能の置き換えとして設計されたものです。

-

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

- -

コンストラクタ

- -

MutationObserver()

- -

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

- -
MutationObserver(
-  function callback
-);
-
- -
引数
+

コンストラクター

-
callback
-
DOM の変更時に呼び出される関数です。この関数は第 1 引数に {{domxref("MutationRecord")}} の配列を、第 2 引数に MutationObserver インスタンス自身を受け取ります。
+
{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}
+
DOM の変更が行われたときに指定されたコールバック関数を呼び出す新しい 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 オブジェクト
+
{{domxref("MutationObserver.disconnect()", "disconnect()")}}
+
MutationObserver のインスタンスが今後の通知を受け取ることを、 {{domxref("MutationObserver.observe", "observe()")}} が再び呼び出されるまで停止します。
+
{{domxref("MutationObserver.observe()", "observe()")}}
+
指定したオプションに合う DOM の変更が発生したときに、コールバック関数を介して通知を受信し始めるように MutationObserver を構成します。
+
{{domxref("MutationObserver.takeRecords()", "takeRecords()")}}
+
MutationObserver の通知キューから保留中の通知をすべて削除し、 {{domxref("MutationRecord")}} の新しい配列 ({{jsxref("Array")}}) で返します。
-
-

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

-
+

Mutation Observer と resize イベントリスナーのカスタマイズとデモ

-

disconnect()

+

https://codepen.io/webgeeker/full/YjrZgg/

-

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

+

例

-
void disconnect();
-
+

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

-

takeRecords()

+
// 変更を監視するノードを選択
+const targetNode = document.getElementById('some-id');
 
-
コールバック関数へ渡される {{domxref("MutationRecord")}} のキューを空にし、キューに入っていた値を返します。

+// (変更を監視する) オブザーバーのオプション
+const config = { attributes: true, childList: true, subtree: true };
 
-
Array takeRecords();
-

+// 変更が発見されたときに実行されるコールバック関数
+const callback = function(mutationsList, observer) {
+    // Use traditional 'for loops' for IE 11
+    for(const mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+            console.log('A child node has been added or removed.');
+        }
+        else if (mutation.type === 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
 
-
戻り値

+// コールバック関数に結びつけられたオブザーバーのインスタンスを生成
+const observer = new MutationObserver(callback);
 
-
{{domxref("MutationRecord")}} の配列。

+// 対象ノードの設定された変更の監視を開始
+observer.observe(targetNode, config);
 
-
MutationObserverInit

+// その後で、監視を停止することができる
+observer.disconnect();
-

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

+

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + +
プロパティ意味
childList対象ノードの子ノード（テキストノードも含む）に対する追加・削除を監視する場合は true にします。
attributes対象ノードの属性に対する変更を監視する場合は true にします。
characterData対象ノードのデータに対する変更を監視する場合は true にします。
subtree対象ノードとその子孫ノードに対する変更を監視する場合は true にします。
attributeOldValue対象ノードの変更前の属性値を記録する場合は true にします（attributes が true の時に有効）。
characterDataOldValue対象ノードの変更前のデータを記録する場合は true にします（characterData が true の時に有効）。
attributeFilterすべての属性の変更を監視する必要がない場合は、（名前空間を除いた）属性ローカル名の配列を指定します。
仕様書状態備考
{{SpecName('DOM WHATWG', '#interface-mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }}
-

{{英語版章題("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")}}

+

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

-

関連情報

+

関連情報

- -

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

- -

仕様

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

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

- -

ブラウザ実装状況

- -

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

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