From f1de0acba8891d05407df18d01153c1f368533b2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 1 Mar 2022 23:33:48 +0900 Subject: 2021/12/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/outerhtml/index.md | 184 +++++++++++++++------------- 1 file changed, 99 insertions(+), 85 deletions(-) diff --git a/files/ja/web/api/element/outerhtml/index.md b/files/ja/web/api/element/outerhtml/index.md index 1b476879bf..3b6278d25e 100644 --- a/files/ja/web/api/element/outerhtml/index.md +++ b/files/ja/web/api/element/outerhtml/index.md @@ -4,115 +4,129 @@ slug: Web/API/Element/outerHTML tags: - API - DOM - - DOM Parsing + - DOM 解釈 - Element + - NeedsMobileBrowserCompatibility - Parsing - - Property - - Reference - - Serialization + - プロパティ + - リファレンス + - シリアライズ - Serializing - outerHTML +browser-compat: api.Element.outerHTML translation_of: Web/API/Element/outerHTML --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

outerHTML は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。

+**`outerHTML`** は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで、指定された文字列を解釈したノードの要素に置き換えることができます。 -

要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。

+要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。 -

構文

+## 構文 -
var content = element.outerHTML;
+```js
+var content = element.outerHTML;
 
-element.outerHTML = htmlString;
-
+element.outerHTML = htmlString; +``` -

値

+### 値 -

outerHTML の値を読み取ると、 element およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 outerHTML の値を設定すると、その要素とそのすべての子孫を、指定された htmlString を解釈して構築された新しい DOM ツリーで置き換えます。

+`outerHTML` の値を読み取ると、 `element` およびその子孫を HTML にシリアライズしたものを含む {{domxref("DOMString")}} が返されます。 `outerHTML` の値を設定すると、その要素とそのすべての子孫を、指定された `htmlString` を解釈して構築された新しい DOM ツリーで置き換えます。 -

例外

+### 例外 -
-
SyntaxError
-
outerHTML に正しくない HTML の文字列を使用して設定しようとした場合。
-
NoModificationAllowedError
-
outerHTML を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。
-
+- `SyntaxError` {{domxref("DOMException")}} + - : `outerHTML` に有効ではない HTML の文字列を使用して設定しようとした場合に発生します。 +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : `outerHTML` を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。 -

例

+## 例 -

要素の outerHTML プロパティの値を得る例を示します。

+要素の `outerHTML` プロパティの値を得る例を示します。 -
// HTML:
-// <div id="d"><p>Content</p><p>Further Elaborated</p></div>
+### HTML
 
-d = document.getElementById("d");
+```html
+

+  
Content

+  
Further Elaborated

+

+```
+
+### Javascript
+
+```js
+var d = document.getElementById("d");
 console.log(d.outerHTML);
 
-// 次の文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
-// が、コンソールウィンドウに出力されます。
-
+// 文字列 '

Content

Further Elaborated

' +// がコンソールウィンドウに書き出されます。 +``` + +次の例では、 `outerHTML` プロパティに値を設定し、ノードを置換します。 + +### HTML + +```html +
+
これは div です。
+
+``` -

次の例では、 outerHTML プロパティに値を設定し、ノードを置換します。

+### Javascript -
// HTML:
-// <div id="container"><div id="d">This is a div.</div></div>
+```js
+var container = document.getElementById("container");
+var d = document.getElementById("d");
 
-container = document.getElementById("container");
-d = document.getElementById("d");
-console.log(container.firstChild.nodeName); // "DIV" が記録される
+console.log(container.firstElementChild.nodeName); // "DIV" と出力
 
-d.outerHTML = "<p>This paragraph replaced the original div.</p>";
-console.log(container.firstChild.nodeName); // "P" が記録される
+d.outerHTML = "
この段落は元の div を置き換えたものです。
";
 
-// #d の div 要素はもはや文書ツリーの一部ではなく、
+console.log(container.firstElementChild.nodeName); // "P" と出力
+
+// #d の div 要素は文書ツリーの一部ではなくなり、
 // 新たな段落に置き換えられました。
-
- -

メモ

- -

要素が親要素を持たない場合、その outerHTML プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。

- -
var div = document.createElement("div");
-div.outerHTML = "<div class=\"test\">test</div>";
-console.log(div.outerHTML); // output: "<div></div>"
- -

また、文書の中で要素が置換された場合も、 outerHTML プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。

- -
var p = document.getElementsByTagName("p")[0];
-console.log(p.nodeName); // "P" を表示
-p.outerHTML = "<div>This div replaced a paragraph.</div>";
-console.log(p.nodeName); // "P" のまま
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
- -

ブラウザーの対応

- -

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

- -

関連情報

- - +``` + +## メモ + +要素が親要素を持たない場合、その `outerHTML` プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。 + +```js +var div = document.createElement("div"); +div.outerHTML = "
test
"; +console.log(div.outerHTML); // output: "
" +``` + +また、文書の中で要素が置換された場合も、 `outerHTML` プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。 + +```js +var p = document.getElementsByTagName("p")[0]; +console.log(p.nodeName); // shows: "P" +p.outerHTML = "
This div replaced a paragraph.
"; +console.log(p.nodeName); // still "P"; +``` + +返値には HTML エスケープされた属性が入ります。 + +```js +var anc = document.createElement("a"); +anc.href = "https://developer.mozilla.org?a=b&c=d"; +console.log(anc.outerHTML); // output: "" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- DOM ツリーを XML 文字列にシリアライズ: {{domxref("XMLSerializer")}} +- XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}} +- {{domxref("HTMLElement.outerText")}} -- cgit v1.2.3-54-g00ecf