From 60c73c98867abf8aa53dc12ae1287e745a475d76 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 19 Aug 2024 21:18:31 +0900 Subject: [PATCH] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/mutationobserver/disconnect/index.md | 34 +++++++++++-------- .../api/mutationobserver/takerecords/index.md | 33 ++++++++++-------- 2 files changed, 39 insertions(+), 28 deletions(-) diff --git a/files/ja/web/api/mutationobserver/disconnect/index.md b/files/ja/web/api/mutationobserver/disconnect/index.md index a2fabf57c6e74c..31f12cf39e7f66 100644 --- a/files/ja/web/api/mutationobserver/disconnect/index.md +++ b/files/ja/web/api/mutationobserver/disconnect/index.md @@ -1,36 +1,42 @@ --- -title: MutationObserver.disconnect() +title: "MutationObserver: disconnect() メソッド" +short-title: disconnect() slug: Web/API/MutationObserver/disconnect +l10n: + sourceCommit: cfb7587e3e3122630ad6cbd94d834ecadbe0a746 --- {{APIRef("DOM WHATWG")}} -{{domxref("MutationObserver")}} の **`disconnect()`** メソッドは、オブザーバーに変更の監視を停止させます。 オブザーバーは、 {{domxref("MutationObserver.observe", "observe()")}} メソッドを再度呼び出すことで再利用できます。 +{{domxref("MutationObserver")}} の **`disconnect()`** メソッドは、オブザーバーに変更の監視を停止させます。 + +オブザーバーは、{{domxref("MutationObserver.observe", "observe()")}} メソッドを再度呼び出すことで再利用できます。 ## 構文 -``` -mutationObserver.disconnect() +```js-nolint +disconnect() ``` ### 引数 -なし +なし。 -### 戻り値 +### 返値 -`undefined` +`undefined`。 > [!NOTE] -> すでに検知されているものの、まだオブザーバーに報告されていない変更の通知は、すべて破棄されます。 +> すでに検出されているが、まだオブザーバーに報告されていない変化の通知はすべて破棄されます。 +> 検出されているが未報告の変化を保持し、処理するには、{{domxref("MutationObserver.takeRecords()", "takeRecords()")}} メソッドを使用してください。 -## 使用における注意点 +## 使用上の注意 -監視されている要素が DOM から削除され、その後ブラウザのガベージコレクション機構によって解放された場合、`MutationObserver` も同様に削除されます。 +監視対象の要素が DOM から除去され、その後ブラウザーのガベージコレクション機構によって解放された場合、`MutationObserver` は除去された要素の監視を停止します。しかし、`MutationObserver` 自体は、他にも監視対象の要素が存在する場合には、その監視を続けることができます。 ## 例 -この例では、オブザーバを作成してから切断し、再利用できるようにします。 +この例では、オブザーバーを作成してから切断し、再利用できるようにします。 ```js const targetNode = document.querySelector("#someElement"); @@ -42,15 +48,15 @@ const observerOptions = { const observer = new MutationObserver(callback); observer.observe(targetNode, observerOptions); -/* some time later... */ +/* some time later… */ observer.disconnect(); ``` -## 仕様 +## 仕様書 {{Specifications}} -## ブラウザ互換性 +## ブラウザーの互換性 {{Compat}} diff --git a/files/ja/web/api/mutationobserver/takerecords/index.md b/files/ja/web/api/mutationobserver/takerecords/index.md index fcd5501ca313f1..08b37448706288 100644 --- a/files/ja/web/api/mutationobserver/takerecords/index.md +++ b/files/ja/web/api/mutationobserver/takerecords/index.md @@ -1,32 +1,37 @@ --- -title: MutationObserver.takeRecords() +title: "MutationObserver: takeRecords() メソッド" +short-title: takeRecords() slug: Web/API/MutationObserver/takeRecords +l10n: + sourceCommit: cfb7587e3e3122630ad6cbd94d834ecadbe0a746 --- {{APIRef("DOM WHATWG")}} -{{domxref("MutationObserver")}} の **`takeRecords()`** メソッドは、検出されたがオブザーバのコールバック関数で処理されていない DOM の変更に一致するすべてのリストを返し、変更キューは空のままにします。 最も一般的な使用例は、オブザーバを切断する直前に保留中の変更記録をすべて取得し、オブザーバを停止する際に保留中の変更を処理できるようにすることです。 +{{domxref("MutationObserver")}} の **`takeRecords()`** メソッドは、検出されたがオブザーバーのコールバック関数で処理されていない DOM の変更に一致するすべてのリストを返し、変更キューは空のままにします。 + +最も一般的な使用例は、オブザーバーを切断する直前に保留中の変更記録をすべて取得し、オブザーバーを停止する際に保留中の変更を処理できるようにすることです。 ## 構文 -``` -const mutationRecords = mutationObserver.takeRecords() +```js-nolint +takeRecords() ``` ### 引数 -なし +なし。 -### 戻り値 +### 返値 -{{domxref("MutationRecord")}} オブジェクトの配列で、そのそれぞれがドキュメントの DOM ツリーの監視された部分に適用された変更を記述します。 +{{domxref("MutationRecord")}} オブジェクトの配列で、そのそれぞれが文書の DOM ツリーの監視された部分に適用された変更を記述します。 > [!NOTE] > 発生したものの、オブザーバーのコールバックに伝えられなかった変更キューは、 `takeRecords()`をコールした後は空のままになります。 ## 例 -この例では、オブザーバを切断する直前に `takeRecords()`を呼び出して、未伝達の{{domxref("MutationRecord")}}を処理する方法を示します。 +この例では、オブザーバーを切断する直前に `takeRecords()`を呼び出して、未伝達の{{domxref("MutationRecord")}}を処理する方法を示します。 ```js const targetNode = document.querySelector("#someElement"); @@ -38,25 +43,25 @@ const observerOptions = { const observer = new MutationObserver(callback); observer.observe(targetNode, observerOptions); -/* ...later, when it's time to stop observing... */ +/* 後で、監視を停止する時点になったら... */ -/* handle any still-pending mutations */ +/* 未処理のままのすべての変更を処理する */ let mutations = observer.takeRecords(); observer.disconnect(); -if (mutations) { +if (mutations.length > 0) { callback(mutations); } ``` -12-17 行目のコードは、処理されていない変更の記録を取得し、その記録を処理できるようにコールバックを呼び出します。これは、{{domxref("MutationObserver.disconnect", "disconnect()")}} を呼び出して DOM の観測を停止する直前に行われます。 +このコードは、処理されていない変更の記録を取得し、その記録を処理できるようにコールバックを呼び出します。これは、{{domxref("MutationObserver.disconnect", "disconnect()")}} を呼び出して DOM の観測を停止する直前に行われます。 -## 仕様 +## 仕様書 {{Specifications}} -## ブラウザ互換性 +## ブラウザーの互換性 {{Compat}}