From 2f641d6ab50878d8e1a2560db1f50df6ff8981d3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 14 Apr 2021 01:24:24 +0900 Subject: Web/API/Element/innerHTML を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/03/12 時点の英語版に同期 --- files/ja/web/api/element/innerhtml/index.html | 85 +++++++++++++-------------- 1 file changed, 42 insertions(+), 43 deletions(-) (limited to 'files/ja/web') 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

{{domxref("Element")}} オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

-
メモ: {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが (&), (<), (>) の文字を含むテキストの子ノードを持っている場合、 innerHTML はこれらの文字を HTML エンティティの "&amp;", "&lt;", "&gt;" としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。
+
メモ: {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが (&), (<), (>) の文字を含むテキストの子ノードを持っている場合、 innerHTML はこれらの文字を HTML エンティティの "&amp;", "&lt;", "&gt;" としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。

要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。

-

構文

+

構文

-
const content = element.innerHTML;
+
const content = element.innerHTML;
 
 element.innerHTML = htmlString;
 

 
-
値

+
値

 
 
要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 innerHTML に値を設定すると、要素のすべての子孫を削除して、 htmlString の文字列で与えられた HTML を解析して構築されたノードに置き換えます。

 
-
例外

+
例外

 
 

- 
SyntaxError

- 
正しくない形の HTML の文字列を使用して innerHTML の値を設定しようとした場合。

- 
NoModificationAllowedError

- 
親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。

+  
SyntaxError

+  
正しくない形の HTML の文字列を使用して innerHTML の値を設定しようとした場合。

+  
NoModificationAllowedError

+  
親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。

 

 
-
使用上のメモ

+
使用上のメモ

 
 
innerHTML プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。

 
-
要素の HTML コンテンツの読み取り

+
要素の HTML コンテンツの読み取り

 
 
innerHTML を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。

 
@@ -53,10 +54,10 @@ translation_of: Web/API/Element/innerHTML
 
これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。

 
 

-
メモ: 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。

+  
メモ: 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。

 

 
-
要素の中身の置き換え

+
要素の中身の置き換え

 
 
innerHTML の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。

 
@@ -70,7 +71,7 @@ translation_of: Web/API/Element/innerHTML
          document.documentElement.innerHTML.replace(/</g,"&lt;") +
             "</pre>";
-

Operational details

+

操作の詳細

innerHTML に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。

@@ -80,7 +81,7 @@ translation_of: Web/API/Element/innerHTML
  • その他の要素はすべて、要素の内容を新しい DocumentFragment のノードで置き換えます。
    • -

    セキュリティの考慮事項

    +

    セキュリティの考慮事項

    ウェブページにテキストを挿入するために innerHTML を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。

    @@ -106,7 +107,7 @@ el.innerHTML = name; // アラートが表示される

    警告: プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 innerHTML は多くの場合、コードが拒絶される結果になります。例えば、ブラウザー拡張機能の中で innerHTML を使用した場合、拡張機能を addons.mozilla.org に提出すると、自動レビュープロセスを通過できないでしょう。

    -

    例

    +

    例

    この例は innerHTML を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。

    @@ -172,42 +173,40 @@ boxElem.addEventListener("mouseleave", logEvent); font-family: monospace; } -

    結果

    +

    結果

    結果の内容はこのように見えます。マウスが移動してボックスを出入りしたり、中でクリックしたりすると、ログが出力されるのを見ることができます。

    {{EmbedLiveSample("Example", 640, 350)}}

    -

    仕様書

    +

    仕様書

    - - - - - - - - - - - - - - + + + + + + + + + + + + + +
    仕様書状態備考
    {{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}初回定義
    仕様書状態備考
    {{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}初回定義
    -

    ブラウザーの対応

    - - +

    ブラウザーの互換性

    {{Compat("api.Element.innerHTML")}}

    -

    関連情報

    +

    関連情報

    -- cgit v1.2.3-54-g00ecf