initial commit

5 files changed, 568 insertions, 0 deletions

diff --git a/files/ja/web/api/mutationobserver/disconnect/index.html b/files/ja/web/api/mutationobserver/disconnect/index.html
new file mode 100644
index 0000000000..3bbd4cbd6c
--- /dev/null
+++ b/files/ja/web/api/mutationobserver/disconnect/index.html
@@ -0,0 +1,74 @@
+---
+title: MutationObserver.disconnect()
+slug: Web/API/MutationObserver/disconnect
+translation_of: Web/API/MutationObserver/disconnect
+---
+<div>{{APIRef("DOM WHATWG")}}</div>
+
+<p><span class="seoSummary">{{domxref("MutationObserver")}} の <code><strong>disconnect()</strong></code> メソッドは、オブザーバーに変更の監視を停止させます。</span> オブザーバーは、 {{domxref("MutationObserver.observe", "observe()")}} メソッドを再度呼び出すことで再利用できます。</p>
+
+<ul>
+</ul>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>mutationObserver</var>.disconnect()
+</pre>
+
+<h3 id="引数">引数</h3>
+
+<p>なし</p>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p><code>undefined</code></p>
+
+<div class="note">
+<p><strong>注:</strong> すでに検知されているものの、まだオブザーバーに報告されていない変更の通知は、すべて破棄されます。</p>
+</div>
+
+<h2 id="使用における注意点">使用における注意点</h2>
+
+<p>監視されている要素が DOM から削除され、その後ブラウザのガベージコレクション機構によって解放された場合、<code>MutationObserver</code> も同様に削除されます。</p>
+
+<h2 id="例">例</h2>
+
+<p>この例では、オブザーバを作成してから切断し、再利用できるようにします。</p>
+
+<pre class="brush: js notranslate">const targetNode = document.querySelector("#someElement");
+const observerOptions = {
+  childList: true,
+  attributes: true
+}
+
+const observer = new MutationObserver(callback);
+observer.observe(targetNode, observerOptions);
+
+/* some time later... */
+
+observer.disconnect();</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-mutationobserver-disconnect', 'MutationObserver.disconnect()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+
+
+<p>{{Compat("api.MutationObserver.disconnect")}}</p>
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
+---
+<p>{{APIRef("DOM WHATWG")}}</p>
+
+<p><code>MutationObserver</code> とは、指定したコールバック関数を <a href="/ja/docs/DOM">DOM</a> の変更時に実行させる API です。この API は、DOM3 Events の仕様で定義されていた <a href="https://developer.mozilla.org/ja/docs/Web/Guide/Events/Mutation_events">Mutation Events</a> を新しく設計し直したものです。</p>
+
+<p>{{英語版章題("Constructor")}}</p>
+
+<h2 id="Constructor" name="Constructor">コンストラクタ</h2>
+
+<h3 id="MutationObserver()" name="MutationObserver()"><code>MutationObserver()</code></h3>
+
+<p>DOM の変更を検知するオブザーバを生成します。</p>
+
+<pre>MutationObserver(
+  function callback
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">引数</h6>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>DOM の変更時に呼び出される関数です。この関数は第 1 引数に {{domxref("MutationRecord")}} の配列を、第 2 引数に <code>MutationObserver</code> インスタンス自身を受け取ります。</dd>
+</dl>
+
+<p>{{英語版章題("Instance medhods")}}</p>
+
+<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>補足</strong>: 引数 {{domxref("Node")}} target は <a href="https://nodejs.org/">NodeJS</a> と関係ありません。</p>
+</div>
+
+<h3 id="observe()" name="observe()"><code>observe()</code></h3>
+
+<p>DOM の変更を検知したいノードを指定し、<code>MutationObserver</code> インスタンスを紐づけます。</p>
+
+<pre>void observe(
+  {{domxref("Node")}} target,
+  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">引数</h6>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>DOM の変更を検知したい {{domxref("Node")}}</dd>
+ <dt><code>options</code></dt>
+ <dd>取得したい変更の種類を指定する <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> オブジェクト</dd>
+</dl>
+
+<div class="note">
+<p><strong>補足</strong>: MutationObserver インスタンスと対象ノードを変えずに observe() を 2 回実行しても、コールバックは 1 回だけ呼び出され、また disconnect() を 2 回呼び出す必要もありません（addEventListener と同様）。しかし、別の MutationObserver インスタンスであれば、同じノードに別のオブザーバが追加されます。</p>
+</div>
+
+<h3 id="disconnect()" name="disconnect()"><code>disconnect()</code></h3>
+
+<p><code>MutationObserver</code> インスタンスを対象ノードから解除します。同じインスタンスで <a href="#observe()"><code>observe()</code></a> メソッドを再度呼び出すまで、オブザーバのコールバック関数は実行されません。</p>
+
+<pre>void disconnect();
+</pre>
+
+<h3 id="takeRecords()" name="takeRecords()"><code>takeRecords()</code></h3>
+
+<p>コールバック関数へ渡される {{domxref("MutationRecord")}} のキューを空にし、キューに入っていた値を返します。</p>
+
+<pre>Array takeRecords();
+</pre>
+
+<h6 id="Return_value" name="Return_value">戻り値</h6>
+
+<p>{{domxref("MutationRecord")}} の配列。</p>
+
+<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> は以下のプロパティを指定できるオブジェクトです。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">プロパティ</td>
+   <td class="header">意味</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>対象ノードの子ノード（テキストノードも含む）に対する追加・削除を監視する場合は <code>true</code> にします。</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>対象ノードの属性に対する変更を監視する場合は <code>true</code> にします。</td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>対象ノードのデータに対する変更を監視する場合は <code>true</code> にします。</td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>対象ノードとその子孫ノードに対する変更を監視する場合は <code>true</code> にします。</td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>対象ノードの変更前の属性値を記録する場合は <code>true</code> にします（<code>attributes</code> が <code>true</code> の時に有効）。</td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>対象ノードの変更前のデータを記録する場合は <code>true</code> にします（<code>characterData</code> が <code>true</code> の時に有効）。</td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>すべての属性の変更を監視する必要がない場合は、（名前空間を除いた）属性ローカル名の配列を指定します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{英語版章題("Example usage")}}</p>
+
+<h2 id="Example_usage" name="Example_usage">使用例</h2>
+
+<p>以下の例は <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">このブログ記事</a> を参考にしたものです。</p>
+
+<pre class="brush: js">// 対象とするノードを取得
+const target = document.getElementById('some-id');
+
+// オブザーバインスタンスを作成
+const observer = new MutationObserver((mutations) =&gt; {
+  mutations.forEach((mutation) =&gt; {
+    console.log(mutation.type);
+  });
+});
+
+// オブザーバの設定
+const config = { attributes: true, childList: true, characterData: true };
+
+// 対象ノードとオブザーバの設定を渡す
+observer.observe(target, config);
+
+// 後ほど、監視を中止
+observer.disconnect();
+</pre>
+
+<p>{{英語版章題("Additional reading")}}</p>
+
+<h2 id="Additional_reading" name="Additional_reading">関連情報</h2>
+
+<ul>
+ <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">簡単な概要</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">より詳細な議論</a></li>
+ <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Chromium の開発者 Rafael Weinstein 氏によるスクリーンキャスト</a></li>
+ <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">ライブラリ "mutation-summary"</a></li>
+</ul>
+
+<p>{{英語版章題("Specifications")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{英語版章題("Browser compatibility")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<p>{{Compat("api.MutationObserver")}}</p>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<div id="compat-desktop"> </div>
+</div>
+</article>
diff --git a/files/ja/web/api/mutationobserver/mutationobserver/index.html b/files/ja/web/api/mutationobserver/mutationobserver/index.html
new file mode 100644
index 0000000000..b000e88afd
--- /dev/null
+++ b/files/ja/web/api/mutationobserver/mutationobserver/index.html
@@ -0,0 +1,100 @@
+---
+title: MutationObserver.MutationObserver()
+slug: Web/API/MutationObserver/MutationObserver
+tags:
+  - API
+  - DOM
+  - Mutation Observer API
+  - MutationObserver
+translation_of: Web/API/MutationObserver/MutationObserver
+---
+<div>{{APIRef("DOM WHATWG")}}</div>
+
+<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>MutationObserver()</strong></span></font> コンストラクタ ({{domxref("MutationObserver")}} インターフェースの一部) は、指定されたコールバックをDOMイベントが発生したときに実行するオブザーバを作成して返します。DOMの監視はすぐに開始されるわけではありません。最初に {{domxref("MutationObserver.observe", "observe()")}} メソッドを呼び出し、DOMのどの部分を監視し、どのような変更を監視するかを決めなければなりません。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox">var <em>observer</em> = new MutationObserver(<em>callback</em>);</pre>
+
+<h3 id="引数">引数</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>対象となるノードやサブツリー、および指定されたオプションの条件を満たすDOMの変更が起きるたびに呼び出される関数。このコールバック関数は、２つの引数を受け取ります。発生したそれぞれの変更を記述した {{domxref("MutationRecord")}} オブジェクトの配列、そしてコールバックを実行した {{domxref("MutationObserver")}} です。詳細については、以下の{{anch("例", "例")}}を参照してください。</dd>
+</dl>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>指定されたコールバックをDOMの変更が発生したときに呼び出すように設定された {{domxref("MutationObserver")}} オブジェクト。</p>
+
+<h2 id="例">例</h2>
+
+<p>この例では、ノードとそのすべての子において、ツリーへの要素の追加と削除、およびツリー内の要素の属性の変更を監視するように設定された <span style="background-color: rgba(220, 220, 220, 0.5);">MutationObserver</span> を作成します。</p>
+
+<h3 id="コールバック関数">コールバック関数</h3>
+
+<pre class="brush: js">function callback(mutationList, observer) {
+  mutationList.forEach((mutation) =&gt; {
+    switch(mutation.type) {
+      case 'childList':
+        /* ツリーに１つ以上の子が追加されたか、ツリーから削除された。
+           mutation.addedNodes と mutation.removedNodes を参照。 */
+        break;
+      case 'attributes':
+        /* Mutation.target の要素の属性値が変更された。
+           属性名は mutation.attributeName にあり、
+           以前の値は mutation.oldValue にある。 */
+        break;
+    }
+  });
+}
+</pre>
+
+<p><span style="background-color: rgba(220, 220, 220, 0.5);">callback()</span> 関数は、{{domxref("MutationObserver.observe", "observe()")}} を呼び出してDOMの監視を開始するときに指定された監視リクエストの設定と一致する変更をオブザーバが確認したときに実行されます。</p>
+
+<p>発生した変更の種類 (子のリストの変更または属性の変更のいずれか) は、{{domxref("MutationRecord.type", "mutation.type")}} プロパティを調べることによって判明します。</p>
+
+<h3 id="オブザーバの作成と開始">オブザーバの作成と開始</h3>
+
+<p>このコードでは、実際に監視プロセスを設定します。</p>
+
+<pre class="brush: js">var targetNode = document.querySelector("#someElement");
+var observerOptions = {
+  childList: true,
+  attributes: true,
+  subtree: true // 省略するか、false に設定すると、親ノードへの変更のみを監視する。
+}
+
+var observer = new MutationObserver(callback);
+observer.observe(targetNode, observerOptions);</pre>
+
+<p>目的のサブツリーは、IDが "someElement" の要素を検索することで見つかります。オブザーバのオプションのセットは、<span style="background-color: rgba(220, 220, 220, 0.5);">observerOptions</span> のレコードで設定します。この中で、<span style="background-color: rgba(220, 220, 220, 0.5);">childList</span> と <span style="background-color: rgba(220, 220, 220, 0.5);">attributes</span> の両方に <span style="background-color: rgba(220, 220, 220, 0.5);">true</span> の値を指定することで、目的の情報を得ることができます。</p>
+
+<p>そして、<span style="background-color: rgba(220, 220, 220, 0.5);">callback()</span> 関数を指定して observer をインスタンス化し、対象のノードとオプションのレコードを指定して <span style="background-color: rgba(220, 220, 220, 0.5);">observe()</span> を呼び出すことで、対象のDOMノードの監視を開始します。</p>
+
+<p>この時点から {{domxref("MutationObserver.disconnect", "disconnect()")}} が呼び出されるまで、<span style="background-color: rgba(220, 220, 220, 0.5);">targetNode</span> をルートとするDOMツリーに要素が追加されたり削除されたり、あるいは要素の属性が変更されるたびに <code>callback()</code> が呼び出されます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-mutationobserver-mutationobserver', 'MutationObserver()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="各ブラウザの対応状況">各ブラウザの対応状況</h2>
+
+
+
+<p>{{Compat("api.MutationObserver.MutationObserver")}}</p>
diff --git a/files/ja/web/api/mutationobserver/observe/index.html b/files/ja/web/api/mutationobserver/observe/index.html
new file mode 100644
index 0000000000..00aa1cd141
--- /dev/null
+++ b/files/ja/web/api/mutationobserver/observe/index.html
@@ -0,0 +1,106 @@
+---
+title: MutationObserver.observe()
+slug: Web/API/MutationObserver/observe
+translation_of: Web/API/MutationObserver/observe
+---
+<div>{{APIRef("DOM WHATWG")}}</div>
+
+<p><span class="seoSummary">{{domxref("MutationObserver")}} の <code><strong>observe()</strong></code> メソッドは、<code>MutationObserver</code> コールバックを設定し、与えられたオプションに適合するDOMへの変更の通知の受信を開始します。設定によっては、オブザーバーは</span>DOM ツリー内の単一の {{domxref("Node", "ノード")}} を監視したり、そのノードとその子孫ノードの一部またはすべてを監視したりします。</p>
+
+<p><code>MutationObserver</code> を停止するには、{{domxref("MutationObserver.disconnect()")}} を呼び出してください。(これにより、そのコールバックはそれ以降発生しなくなります。) </p>
+
+<ul>
+</ul>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>mutationObserver</var>.observe(<var>target</var>, <var>options</var>)
+</pre>
+
+<h3 id="引数">引数</h3>
+
+<dl>
+ <dt><code><var>target</var></code></dt>
+ <dd>DOM ツリー内で変更を監視したり、監視するノードのサブツリーのルートになったりするDOM{{domxref("Node", "ノード")}} (あるいは、{{domxref("Element", "要素")}}である可能性もあります。)</dd>
+ <dt><code><var>options</var></code></dt>
+ <dd>どのDOMの変更を<code><var>mutationObserver</var></code>の<code><var>callback</var></code>に報告するかを記述するオプションを提供する、{{domxref("MutationObserverInit")}}オブジェクト。</dd>
+</dl>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p><code>undefined</code></p>
+
+<h3 id="例外">例外</h3>
+
+<dl>
+ <dt>{{jsxref('TypeError')}}</dt>
+ <dd>以下のいずれかの状況でスローされます。
+ <ul>
+  <li>実際には何も監視されないように<code><var>options</var></code>が設定されている場合。<br>
+   (例えば、 {{domxref("MutationObserverInit.childList")}}、 {{domxref("MutationObserverInit.attributes")}}、{{domxref("MutationObserverInit.characterData")}} が全て<code>false</code>の場合)</li>
+  <li><code><var>options.</var>attributes</code> の値が <code>false</code> (これは属性の変更を監視しないことを示す)であるにも関わらず、<code>attributeOldValue</code> は <code>true</code> であるか、または、<code>attributeFilter</code> が存在する場合。</li>
+  <li>{{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} は <code>true</code> であるにも関わらず、 {{domxref("MutationObserverInit.characterData")}} が <code>false</code> (これは、文字の変更を監視しないことを示す)である場合。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="使用における注意点">使用における注意点</h2>
+
+<h3 id="MutationObserverの再利用">MutationObserverの再利用</h3>
+
+<p>同一の <code>MutationObserver</code> で、<code>observe()</code> を複数回呼び出すことで、DOM ツリーの異なる部分や異なる種類の変更を監視することができます。ただし、注意すべき点がいくつかあります。</p>
+
+<ul>
+ <li>同じ<code>MutationObserver</code>で既に監視されているノードで<code>observe()</code>を呼び出すと、新しいオブザーバーがアクティブになる前に、監視されているすべてのターゲットから既存のすべてのオブザーバーが自動的に削除されます。</li>
+ <li>同じ<code>MutationObserver</code>がターゲットで使用されていない場合は、既存のオブザーバーを残して新しいオブザーバーを追加します。</li>
+</ul>
+
+<h3 id="ノードの切り離しが行われた際の監視の追従">ノードの切り離しが行われた際の監視の追従</h3>
+
+<p>MutationObserverは、ノード間の直接接続が切断されても、時間の経過とともに目的のノードセットを監視できるようにすることを目的としています。ノードのサブツリーの監視を開始し、そのサブツリーの一部が切り離されて DOM 内の別の場所に移動した場合、切り離されたノードのセグメントを監視し続け、元のサブツリーからノードが切り離される前と同じコールバックを受け取ります。</p>
+
+<p>つまり、監視しているサブツリーからノードが切り離されたことが通知されるまでは、切り離されたサブツリーとそのノードへの変更の通知を受けます。これにより、接続が切断された後、移動したノードやサブツリーの変更を監視し始める前に発生した変更を見逃してしまうことを防ぐことができます。</p>
+
+<p>理論的には、発生した変更を記述した {{domxref("MutationRecord")}} オブジェクトを追跡していれば、変更を「元に戻す」ことができ、DOM を初期状態に戻すことができるはずです。</p>
+
+<h2 id="例">例</h2>
+
+<p>この例では、{{domxref("MutationObserver")}} のインスタンス上で<code><strong>observe()</strong></code> メソッドを呼び出す方法を示します。一度設定したら、ターゲット要素と {{domxref("MutationObserverInit")}} オプションオブジェクトを渡します。</p>
+
+<pre class="brush: js notranslate">// identify an element to observe
+const elementToObserve = document.querySelector("#targetElementId");
+
+// create a new instance of `MutationObserver` named `observer`,
+// passing it a callback function
+const observer = new MutationObserver(function() {
+    console.log('callback that runs when observer is triggered');
+});
+
+// call `observe()` on that MutationObserver instance,
+// passing it the element to observe, and the options object
+observer.observe(elementToObserve, {subtree: true, childList: true});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-mutationobserver-observe', 'MutationObserver.observe()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+
+
+<p>{{Compat("api.MutationObserver.observe")}}</p>
diff --git a/files/ja/web/api/mutationobserver/takerecords/index.html b/files/ja/web/api/mutationobserver/takerecords/index.html
new file mode 100644
index 0000000000..99bdf29e83
--- /dev/null
+++ b/files/ja/web/api/mutationobserver/takerecords/index.html
@@ -0,0 +1,78 @@
+---
+title: MutationObserver.takeRecords()
+slug: Web/API/MutationObserver/takeRecords
+translation_of: Web/API/MutationObserver/takeRecords
+---
+<div>{{APIRef("DOM WHATWG")}}</div>
+
+<p><span class="seoSummary">{{domxref("MutationObserver")}} の <code><strong>takeRecords()</strong></code> メソッドは、検出されたがオブザーバのコールバック関数で処理されていない DOM の変更に一致するすべてのリストを返し、変更キューは空のままにします。</span> 最も一般的な使用例は、オブザーバを切断する直前に保留中の変更記録をすべて取得し、オブザーバを停止する際に保留中の変更を処理できるようにすることです。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox notranslate">const <var>mutationRecords</var> = <var>mutationObserver</var>.takeRecords()
+</pre>
+
+<h3 id="引数">引数</h3>
+
+<p>なし</p>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>{{domxref("MutationRecord")}} オブジェクトの配列で、そのそれぞれがドキュメントの DOM ツリーの監視された部分に適用された変更を記述します。</p>
+
+<div class="note">
+<p><strong>注:</strong> 発生したものの、オブザーバーのコールバックに伝えられなかった変更キューは、 <code>takeRecords()</code>をコールした後は空のままになります。</p>
+</div>
+
+<h2 id="例">例</h2>
+
+<p>この例では、オブザーバを切断する直前に <code>takeRecords()</code>を呼び出して、未伝達の{{domxref("MutationRecord")}}を処理する方法を示します。</p>
+
+<pre class="brush: js; highlight:[12-18] notranslate">const targetNode = document.querySelector("#someElement");
+const observerOptions = {
+  childList: true,
+  attributes: true
+}
+
+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) {
+  callback(mutations);
+}
+</pre>
+
+<p>12-17 行目のコードは、処理されていない変更の記録を取得し、その記録を処理できるようにコールバックを呼び出します。これは、{{domxref("MutationObserver.disconnect", "disconnect()")}} を呼び出してDOMの観測を停止する直前に行われます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-mutationobserver-takerecords', 'MutationObserver.takeRecords()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+
+
+<p>{{Compat("api.MutationObserver.takeRecords")}}</p>