Web/API/Element/innerHTML を更新

2021/03/12 時点の英語版に同期

1 files changed, 42 insertions, 43 deletions

diff --git a/files/ja/web/api/element/innerhtml/index.html b/files/ja/web/api/element/innerhtml/index.html
index cce92d169e..a595f13350 100644
--- a/files/ja/web/api/element/innerhtml/index.html
+++ b/files/ja/web/api/element/innerhtml/index.html
@@ -1,12 +1,13 @@
 ---
-title: element.innerHTML
+title: Element.innerHTML
 slug: Web/API/Element/innerHTML
 tags:
   - API
   - DOM
-  - DOM 解析
+  - DOM Parsing
   - Element
-  - HTML 解析
+  - Parsing HTML
+  - Property
   - Reference
   - innerHTML
   - プロパティ
@@ -16,35 +17,35 @@ translation_of: Web/API/Element/innerHTML
 
 <p><span class="seoSummary">{{domxref("Element")}} オブジェクトの <strong><code>innerHTML</code></strong> プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。</span></p>
 
-<div class="note"><strong>メモ: </strong> {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが <code>(&amp;)</code>, <code>(&lt;)</code>, <code>(&gt;)</code> の文字を含むテキストの子ノードを持っている場合、 <code>innerHTML</code> はこれらの文字を HTML エンティティの <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code>, <code>"&amp;gt;"</code> としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。</div>
+<div class="note"><strong>メモ:</strong> {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが <code>(&amp;)</code>, <code>(&lt;)</code>, <code>(&gt;)</code> の文字を含むテキストの子ノードを持っている場合、 <code>innerHTML</code> はこれらの文字を HTML エンティティの <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code>, <code>"&amp;gt;"</code> としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。</div>
 
 <p>要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。</p>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML;
+<pre class="brush: js">const <var>content</var> = <var>element</var>.innerHTML;
 
 <var>element</var>.innerHTML = <var>htmlString</var>;
 </pre>
 
-<h3 id="Value" name="Value">値</h3>
+<h3 id="Value">値</h3>
 
 <p>要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 <code>innerHTML</code> に値を設定すると、要素のすべての子孫を削除して、 <var>htmlString</var> の文字列で与えられた HTML を解析して構築されたノードに置き換えます。</p>
 
-<h3 id="Exceptions" name="Exceptions">例外</h3>
+<h3 id="Exceptions">例外</h3>
 
 <dl>
- <dt><code>SyntaxError</code></dt>
- <dd>正しくない形の HTML の文字列を使用して <code>innerHTML</code> の値を設定しようとした場合。</dd>
- <dt><code>NoModificationAllowedError</code></dt>
- <dd>親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。</dd>
+  <dt><code>SyntaxError</code></dt>
+  <dd>正しくない形の HTML の文字列を使用して <code>innerHTML</code> の値を設定しようとした場合。</dd>
+  <dt><code>NoModificationAllowedError</code></dt>
+  <dd>親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。</dd>
 </dl>
 
-<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
+<h2 id="Usage_notes">使用上のメモ</h2>
 
 <p><code>innerHTML</code> プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。</p>
 
-<h3 id="要素の_HTML_コンテンツの読み取り">要素の HTML コンテンツの読み取り</h3>
+<h3 id="Reading_the_HTML_contents_of_an_element">要素の HTML コンテンツの読み取り</h3>
 
 <p><code>innerHTML</code> を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。</p>
 
@@ -53,10 +54,10 @@ translation_of: Web/API/Element/innerHTML
 <p>これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。</p>
 
 <div class="note">
-<p><strong>メモ:</strong> 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。</p>
+  <p><strong>メモ:</strong> 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。</p>
 </div>
 
-<h3 id="Replacing_the_contents_of_an_element" name="Replacing_the_contents_of_an_element">要素の中身の置き換え</h3>
+<h3 id="Replacing_the_contents_of_an_element">要素の中身の置き換え</h3>
 
 <p><code>innerHTML</code> の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。</p>
 
@@ -70,7 +71,7 @@ translation_of: Web/API/Element/innerHTML
          document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
             "&lt;/pre&gt;";</pre>
 
-<h4 id="Operational_details" name="Operational_details">Operational details</h4>
+<h4 id="Operational_details">操作の詳細</h4>
 
 <p><code>innerHTML</code> に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。</p>
 
@@ -80,7 +81,7 @@ translation_of: Web/API/Element/innerHTML
  <li>その他の要素はすべて、要素の内容を新しい <code>DocumentFragment</code> のノードで置き換えます。</li>
 </ol>
 
-<h3 id="Security_considerations" name="Security_considerations">セキュリティの考慮事項</h3>
+<h3 id="Security_considerations">セキュリティの考慮事項</h3>
 
 <p>ウェブページにテキストを挿入するために <code>innerHTML</code> を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。</p>
 
@@ -106,7 +107,7 @@ el.innerHTML = name; // アラートが表示される</pre>
 <p><strong>警告:</strong> プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 <code>innerHTML</code> は多くの場合、コードが拒絶される結果になります。例えば、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">ブラウザー拡張機能</a>の中で <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation"><code>innerHTML</code> を使用した場合</a>、拡張機能を <a href="https://addons.mozilla.org/">addons.mozilla.org</a> に提出すると、自動レビュープロセスを通過できないでしょう。</p>
 </div>
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Example">例</h2>
 
 <p>この例は <code>innerHTML</code> を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。</p>
 
@@ -172,42 +173,40 @@ boxElem.addEventListener("mouseleave", logEvent);</pre>
   font-family: monospace;
 }</pre>
 
-<h3 id="Result" name="Result">結果</h3>
+<h3 id="Result">結果</h3>
 
 <p>結果の内容はこのように見えます。マウスが移動してボックスを出入りしたり、中でクリックしたりすると、ログが出力されるのを見ることができます。</p>
 
 <p>{{EmbedLiveSample("Example", 640, 350)}}</p>
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+<h2 id="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 Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
-   <td>{{Spec2('DOM Parsing')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">仕様書</th>
+      <th scope="col">状態</th>
+      <th scope="col">備考</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
+      <td>{{Spec2('DOM Parsing')}}</td>
+      <td>初回定義</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
 <p>{{Compat("api.Element.innerHTML")}}</p>
 
-<h2 id="関連情報">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li>{{domxref("Node.textContent")}} および {{domxref("Node.innerText")}}</li>
- <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
- <li>HTML を解析して DOM ツリーへ入れる: {{domxref("DOMParser")}}</li>
- <li>XML または HTML をシリアライズして DOM ツリーへ入れる: {{domxref("XMLSerializer")}}</li>
+  <li>{{domxref("Node.textContent")}} および {{domxref("HTMLElement.innerText")}}</li>
+  <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+  <li>HTML を解析して DOM ツリーへ入れる: {{domxref("DOMParser")}}</li>
+  <li>XML または HTML をシリアライズして DOM ツリーへ入れる: {{domxref("XMLSerializer")}}</li>
 </ul>