From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/element/outerhtml/index.html | 120 ++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/ja/web/api/element/outerhtml/index.html (limited to 'files/ja/web/api/element/outerhtml/index.html') diff --git a/files/ja/web/api/element/outerhtml/index.html b/files/ja/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..6231aa1bb0 --- /dev/null +++ b/files/ja/web/api/element/outerhtml/index.html @@ -0,0 +1,120 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - API + - DOM + - DOM Parsing + - Element + - Parsing + - Property + - Reference + - Serialization + - Serializing + - outerHTML +translation_of: Web/API/Element/outerHTML +--- +
{{APIRef("DOM")}}
+ +

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

+ +

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

+ +

構文

+ +
var content = element.outerHTML;
+
+element.outerHTML = htmlString;
+
+ +

値

+ +

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

+ +

例外

+ +
+
SyntaxError
+
outerHTML に正しくない HTML の文字列を使用して設定しようとした場合。
+
NoModificationAllowedError
+
outerHTML を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。
+
+ +

例

+ +

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

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

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

+ +
// HTML:
+// <div id="container"><div id="d">This is a div.</div></div>
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // "DIV" が記録される
+
+d.outerHTML = "<p>This paragraph replaced the original div.</p>";
+console.log(container.firstChild.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")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf