2021/11/08 時点の英語版に同期

4 files changed, 167 insertions, 175 deletions

diff --git a/files/ja/web/api/node/parentelement/index.md b/files/ja/web/api/node/parentelement/index.md
index e121601c07..8aa85b65f5 100644
--- a/files/ja/web/api/node/parentelement/index.md
+++ b/files/ja/web/api/node/parentelement/index.md
@@ -2,45 +2,36 @@
 title: Node.parentElement
 slug: Web/API/Node/parentElement
 tags:
-  - DOM
-  - Element
-  - Node
-  - Property
-  - parent
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.parentElement
 translation_of: Web/API/Node/parentElement
 ---
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
+{{APIRef("DOM")}}
 
-<p><strong>Node.parentElement</strong>のread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、<code>null</code> が返ります。</p>
+**`parentElement`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、この DOM ノードの親である要素 ({{DOMxRef("Element")}}) を返します。このノードに親ノードがないか、親が DOM の {{DOMxRef("Element")}} でない場合は `null` を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 値
 
-<pre class="syntaxbox"><var>parentElement</var> = <em>node</em>.parentElement</pre>
+現在のノードの親ノードである {{domxref("Element")}} を返します。そのようなものがない場合は `null` を返します。
 
-<p><code>parentElement</code>は現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトか<code>nullです</code>。</p>
+## 例
 
-<h2 id="Example" name="Example">例</h2>
+```js
+if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}
+```
 
-<pre class="brush:js">if (node.parentElement) {
-  node.parentElement.style.color = "red";
-}</pre>
+## 仕様書
 
-<h2 id="Specification" name="Specification">仕様</h2>
+{{Specifications}}
 
-<ul>
- <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
-</ul>
+## ブラウザーの互換性
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+{{Compat}}
 
-<p>{{Compat("api.Node.parentElement")}}</p>
+## 関連情報
 
-<p>一部のブラウザーでは、<code>parentElement</code>プロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.parentNode")}}</li>
-</ul>
+- {{domxref("Node.parentNode")}}
diff --git a/files/ja/web/api/node/parentnode/index.md b/files/ja/web/api/node/parentnode/index.md
index 33ea858b0c..d50c111b37 100644
--- a/files/ja/web/api/node/parentnode/index.md
+++ b/files/ja/web/api/node/parentnode/index.md
@@ -2,46 +2,46 @@
 title: Node.parentNode
 slug: Web/API/Node/parentNode
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Node
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.parentNode
 translation_of: Web/API/Node/parentNode
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>指定されたノードの DOM ツリー内の親ノードを返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>parentNode</var> = <var>node</var>.parentNode
-</pre>
-<ul>
- <li><code>parentNode</code> : 指定ノードの親ノード。要素の親ノードは、<code>Element</code> ノード、<code>Document</code> ノード、または <code>DocumentFragment</code> になります。</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">if (node.parentNode) {
-  // ツリー上に既に存在しない場合を除き、
-  // ツリーからノードを削除します。
+{{APIRef("DOM")}}
+
+**`parentNode`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、 DOM ツリー内の特定のノードの親ノードを返します。
+
+`Document` および `DocumentFragment` [ノード](/ja/docs/Web/API/Node/nodeType)には親が付くことはないので、 `parentNode` は常に `null` になります。
+ノードが生成されてからツリーに割り当てられていない場合も `null` を返します。
+
+## 値
+
+現在のノードの親に当たる {{domxref("Node")}} です。要素の親になるのは `Element` ノード、 `Document` ノード、 `DocumentFragment` ノードの何れかです。
+
+## 例
+
+```js
+if (node.parentNode) {
+  // ノードがツリーの中にある場合は、ツリーから取り除く
   node.parentNode.removeChild(node);
-}</pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p><code>parentNode</code> は、以下の<a href="/ja/docs/Web/API/Node.nodeType">ノードタイプ</a>については <code>null</code> を返します : <code>Attr</code> 、<code>Document</code> 、<code>DocumentFragment</code> 、<code>Entity</code> 、<code>Notation</code></p>
-<p>また、ノードが作成された直後でまだツリーに加えられていない場合も <code>null</code> を返します。</p>
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.parentNode")}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{Domxref("element.firstChild")}}</li>
- <li>{{Domxref("element.lastChild")}}</li>
- <li>{{Domxref("element.childNodes")}}</li>
- <li>{{Domxref("element.nextSibling")}}</li>
- <li>{{Domxref("element.previousSibling")}}</li>
- <li>{{Domxref("Node.removeChild")}}</li>
-</ul>
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{Domxref("Node.firstChild")}}
+- {{Domxref("Node.lastChild")}}
+- {{Domxref("Node.childNodes")}}
+- {{Domxref("Node.nextSibling")}}
+- {{Domxref("Node.parentElement")}}
+- {{Domxref("Node.previousSibling")}}
+- {{Domxref("Node.removeChild")}}
diff --git a/files/ja/web/api/node/previoussibling/index.md b/files/ja/web/api/node/previoussibling/index.md
index 5506f5fd86..cec77e3af9 100644
--- a/files/ja/web/api/node/previoussibling/index.md
+++ b/files/ja/web/api/node/previoussibling/index.md
@@ -2,41 +2,74 @@
 title: Node.previousSibling
 slug: Web/API/Node/previousSibling
 tags:
-  - DOM
-  - Gecko
-  - Node
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.previousSibling
 translation_of: Web/API/Node/previousSibling
 ---
-<div>{{ApiRef}}</div>
+{{APIRef("DOM")}}
 
-<h2 id="Summary" name="Summary">概要</h2>
+**`previousSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親ノードの {{domxref("Node.childNodes", "childNodes")}} リスト内で、直前にある ノードを返します。指定されたノードがリストの先頭にあった倍は `null` を返します。
 
-<p>指定のノードの親ノードの <a href="/ja/docs/Web/API/Node.childNodes"><code>childNodes</code></a> リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は <code>null</code> を返します。</p>
+> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。
+> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。
+>
+> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。
+>
+> [`previousElementSibling`](/ja/docs/Web/API/Element/previousElementSibling) を使用すると、（テキストノードやその他の要素以外のノードを飛ばして）次の要素を取得することができます。
+>
+> 子ノードのリストで反対方向に移動する場合は、 [Node.nextSibling](/ja/docs/Web/API/Node/nextSibling) を使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 値
 
-<pre class="syntaxbox"><var>previousNode</var> = <var>node</var>.previousSibling;
-</pre>
+現在のノードの直前のノードを表す {{domxref("Node")}} です。
+存在しない場合は `null` です。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;
+次の例では、要素にテキストノードがある場合とない場合の `previousSibling` の動作を示しています。
 
-alert( document.getElementById("b1").previousSibling ); // null
-alert( document.getElementById("b2").previousSibling.id ); // "b1"
-</pre>
+### 最初の例
 
-<h2 id="Notes" name="Notes">注記</h2>
+この例では、一連の `img` 要素が互いに隣り合っており、その間にホワイトスペースがありません。
 
- <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p>
-    <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p>
+```html
+<img id="b0"><img id="b1"><img id="b2">
+```
 
-<p><code>childNode</code> リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。</p>
+```js
+document.getElementById("b1").previousSibling;    // <img id="b0">
+document.getElementById("b2").previousSibling.id; // "b1"
+```
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+### 2 番目の例
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
-</ul>
+この例では、 `img` 要素の間にホワイトスペースのテキストノード（改行）があります。
+
+```html
+<img id="b0">
+<img id="b1">
+<img id="b2">
+```
+
+```js
+document.getElementById("b1").previousSibling;                 // #text
+document.getElementById("b1").previousSibling.previousSibling; // <img id="b0">
+document.getElementById("b2").previousSibling.previousSibling; // <img id="b1">
+document.getElementById("b2").previousSibling;                 // #text
+document.getElementById("b2").previousSibling.id;              // undefined
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.nextSibling")}}
+- {{domxref("Element.previousElementSibling")}}
diff --git a/files/ja/web/api/node/textcontent/index.md b/files/ja/web/api/node/textcontent/index.md
index 3f90221d9f..1777a5cd21 100644
--- a/files/ja/web/api/node/textcontent/index.md
+++ b/files/ja/web/api/node/textcontent/index.md
@@ -2,112 +2,80 @@
 title: Node.textContent
 slug: Web/API/Node/textContent
 tags:
-  - API
-  - DOM
-  - Node
-  - Property
-  - Reference
   - プロパティ
+  - リファレンス
+browser-compat: api.Node.textContent
 translation_of: Web/API/Node/textContent
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>textContent</strong></code> は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。</p>
+**`textContent`** は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。
 
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> <code>textContent</code> と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは<a href="#Differences_from_innerText">重要な点が異なります</a>。</p>
-</div>
+> **Note:** `textContent` と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、 2 つのプロパティは[重要な点が異なります](#innertext_との違い)。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 値
 
-<pre class="syntaxbox">let <var>text</var> = <var>someNode</var>.textContent
-<var>someOtherNode</var>.textContent = <var>string</var>
-</pre>
+文字列または {{jsxref("null")}} です。値は場面によります。
 
-<h3 id="Value" name="Value">値</h3>
+- ノードが {{domxref("document")}} または {{glossary("doctype")}} である場合、 `textContent` は {{jsxref("null")}} を返します。
 
-<p>文字列または {{jsxref("null")}}</p>
+  > **Note:** 文書全体の*すべての*テキストと [CDATA データ](/ja/docs/Web/API/CDATASection)を取得するには、 `document.documentElement.textContent` を使用する方法があります。
 
-<h2 id="Description" name="Description">説明</h2>
+- ノードが [CDATA セクション](/ja/docs/Web/API/CDATASection)、コメント、[処理命令ノード](/ja/docs/Web/API/ProcessingInstruction)、 [テキストノード](/ja/docs/Web/API/Text)の場合、 `textContent` はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。
+- 他のノード型の場合、`textContent` は、コメントと処理命令ノードを除く、すべての子ノードの `textContent` 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。）
 
-<p><code>textContent</code> の値は状況によります。</p>
+> **Warning:** ノードの `textContent` を設定すると、そのノードの*すべて*の子が取り除かれて、指定された値を持つ単一のテキストノードに置き換わります。
 
-<ul>
- <li>ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 <code>textContent</code> は {{jsxref("null")}} を返します。
+### innerText との違い
 
-  <div class="note"><strong>メモ:</strong> 文書全体の<em>すべての</em>テキストと <a href="/ja/docs/Web/API/CDATASection">CDATA データ</a>を取得するには、 <code><a href="/ja/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> を使用する方法があります。</div>
- </li>
- <li>ノードが <a href="/ja/docs/Web/API/CDATASection">CDATA セクション</a>、コメント、<a href="/ja/docs/Web/API/ProcessingInstruction">処理命令ノード</a>、 <a href="/ja/docs/Web/API/Text">テキストノード</a>の場合、 <code>textContent</code> はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。</li>
- <li>他のノードタイプの場合、<code>textContent</code> は、コメントと処理命令ノードを除く、すべての子ノードの <code>textContent</code> 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)</li>
-</ul>
+`Node.textContent` と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。
 
-<p>ノードの <code>textContent</code> を設定すると、そのノードの<em>すべて</em>の子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。</p>
+- `textContent` は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、*すべて*の要素の中身を取得します。一方、 `innerText` は「人間が読める」要素のみを示します。
+- `textContent` はノード内のすべての要素を返します。一方、 `innerText` はスタイルを反映し、「非表示」の要素のテキストは返しません。
 
-<h3 id="Differences_from_innerText" name="Differences_from_innerText">innerText との違い</h3>
+  - もっと言えば、 `innerText` は CSS のスタイルを考慮するので、 `innerText` の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)
 
-<p><code>Node.textContent</code> と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。</p>
+- `textContent` とは異なり、 `innerText` を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを*完全に破棄します*。他の要素または同じ要素にノードをもう一度挿入することは不可能です。
 
-<ul>
- <li><code>textContent</code> は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、<em>すべて</em>の要素の内容を取得します。一方、 <code>innerText</code> は「人間が読める」要素のみを示します。</li>
- <li><code>textContent</code> はノード内のすべての要素を返します。一方、 <code>innerText</code> はスタイルを反映し、「非表示」の要素のテキストを返しません。
-  <ul>
-   <li>もっと言えば、 <code>innerText</code> は CSS のスタイルを考慮するので、 <code>innerText</code> の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)</li>
-  </ul>
- </li>
- <li><code>textContent</code> とは異なり、 <code>innerText</code> を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを<em>完全に破棄します</em>。他の要素または同じ要素にノードをもう一度挿入することは不可能です。</li>
-</ul>
+### innerHTML との違い
 
-<h3 id="Differences_from_innerHTML" name="Differences_from_innerHTML">innerHTML との違い</h3>
+{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 `innerHTML` を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 `textContent` は値が HTML として解析されないので性能が良くなります。
 
-<p>{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 <code>innerHTML</code> を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 <code>textContent</code> は値が HTML として解析されないので性能が良くなります。</p>
+さらに、`textContent` を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。
 
-<p>さらに、<code>textContent</code> を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。</p>
+## 例
 
-<h2 id="Example" name="Example">例</h2>
+以下のような HTML の断片があります。
 
-<p>以下のような HTML の断片があります。</p>
+```html
+<div id="divA">This is <span>some</span> text!</div>
+```
 
-<pre class="brush: html">&lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text!&lt;/div&gt;</pre>
+... `textContent` を使用して、要素のテキストの内容を取得することができます。
 
-<p>... <code>textContent</code> を使用して、要素のテキストの内容を取得することができます。</p>
+```js
+let text = document.getElementById('divA').textContent;
+// 変数 text の値は 'This is some text!' となります。
+```
 
-<pre class="brush: js">let text = document.getElementById('divA').textContent;
-// 変数 text の値は 'This is some text!' となります。</pre>
+... また、要素のテキストを設定します。
 
-<p>... また、要素のテキストを設定します。</p>
-
-<pre class="brush: js">document.getElementById('divA').textContent = 'This text is different!';
+```js
+document.getElementById('divA').textContent = 'This text is different!';
 // divA の HTML は次のようになります。
-// &lt;div id="divA"&gt;This text is different!&lt;/div&gt;
-</pre>
-
-<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','#dom-node-textcontent','Node.textContent')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Node.textContent")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("HTMLElement.innerText")}}</li>
- <li>{{domxref("Element.innerHTML")}}</li>
- <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (ブログ投稿)</li>
-</ul>
+// <div id="divA">This text is different!</div>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLElement.innerText")}}
+- {{domxref("Element.innerHTML")}}
+- [More on differences between `innerText` and `textContent`](http://perfectionkills.com/the-poor-misunderstood-innerText/) (ブログ投稿)