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

1 files changed, 50 insertions, 82 deletions

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/) (ブログ投稿)