diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/ja/web/api/element/outerhtml/index.md | 184 |
1 files 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 --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p><strong><code>outerHTML</code></strong> は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。</p> +**`outerHTML`** は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで、指定された文字列を解釈したノードの要素に置き換えることができます。 -<p>要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。</p> +要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="syntaxbox">var <var>content</var> = <var>element</var>.outerHTML; +```js +var content = element.outerHTML; -<var>element</var>.outerHTML = <var>htmlString</var>; -</pre> +element.outerHTML = htmlString; +``` -<h3 id="Value" name="Value">値</h3> +### 値 -<p><code>outerHTML</code> の値を読み取ると、 <code><var>element</var></code> およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 <code>outerHTML</code> の値を設定すると、その要素とそのすべての子孫を、指定された <code><var>htmlString</var></code> を解釈して構築された新しい DOM ツリーで置き換えます。</p> +`outerHTML` の値を読み取ると、 `element` およびその子孫を HTML にシリアライズしたものを含む {{domxref("DOMString")}} が返されます。 `outerHTML` の値を設定すると、その要素とそのすべての子孫を、指定された `htmlString` を解釈して構築された新しい DOM ツリーで置き換えます。 -<h3 id="Exceptions" name="Exceptions">例外</h3> +### 例外 -<dl> - <dt><code>SyntaxError</code></dt> - <dd><code>outerHTML</code> に正しくない HTML の文字列を使用して設定しようとした場合。</dd> - <dt><code>NoModificationAllowedError</code></dt> - <dd><code>outerHTML</code> を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。</dd> -</dl> +- `SyntaxError` {{domxref("DOMException")}} + - : `outerHTML` に有効ではない HTML の文字列を使用して設定しようとした場合に発生します。 +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : `outerHTML` を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<p>要素の <code>outerHTML</code> プロパティの値を得る例を示します。</p> +要素の `outerHTML` プロパティの値を得る例を示します。 -<pre class="brush: js">// HTML: -// <div id="d"><p>Content</p><p>Further Elaborated</p></div> +### HTML -d = document.getElementById("d"); +```html +<div id="d"> + <p>Content</p> + <p>Further Elaborated</p> +</div> +``` + +### Javascript + +```js +var d = document.getElementById("d"); console.log(d.outerHTML); -// 次の文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>' -// が、コンソールウィンドウに出力されます。 -</pre> +// 文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>' +// がコンソールウィンドウに書き出されます。 +``` + +次の例では、 `outerHTML` プロパティに値を設定し、ノードを置換します。 + +### HTML + +```html +<div id="container"> + <div id="d">これは div です。</div> +</div> +``` -<p>次の例では、 <code>outerHTML</code> プロパティに値を設定し、ノードを置換します。</p> +### Javascript -<pre class="brush: js">// 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 = "<p>この段落は元の div を置き換えたものです。</p>"; -// #d の div 要素はもはや文書ツリーの一部ではなく、 +console.log(container.firstElementChild.nodeName); // "P" と出力 + +// #d の div 要素は文書ツリーの一部ではなくなり、 // 新たな段落に置き換えられました。 -</pre> - -<h2 id="Notes" name="Notes">メモ</h2> - -<p>要素が親要素を持たない場合、その <code>outerHTML</code> プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。</p> - -<pre class="brush: js">var div = document.createElement("div"); -div.outerHTML = "<div class=\"test\">test</div>"; -console.log(div.outerHTML); // output: "<div></div>"</pre> - -<p>また、文書の中で要素が置換された場合も、 <code>outerHTML</code> プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。</p> - -<pre class="brush: js">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" のまま -</pre> - -<h2 id="Specification" name="Specification">仕様書</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', '#outerhtml', 'Element.outerHTML')}}</td> - <td>{{ Spec2('DOM Parsing') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("api.Element.outerHTML")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>DOM ツリーを XML または HTML にシリアライズ: {{domxref("XMLSerializer")}}</li> - <li>XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}}</li> - <li>{{domxref("HTMLElement.outerText")}}</li> -</ul> +``` + +## メモ + +要素が親要素を持たない場合、その `outerHTML` プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。 + +```js +var div = document.createElement("div"); +div.outerHTML = "<div class=\"test\">test</div>"; +console.log(div.outerHTML); // output: "<div></div>" +``` + +また、文書の中で要素が置換された場合も、 `outerHTML` プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。 + +```js +var p = document.getElementsByTagName("p")[0]; +console.log(p.nodeName); // shows: "P" +p.outerHTML = "<div>This div replaced a paragraph.</div>"; +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: "<a href='https://developer.mozilla.org?a=b&c=d'></a>" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- DOM ツリーを XML 文字列にシリアライズ: {{domxref("XMLSerializer")}} +- XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}} +- {{domxref("HTMLElement.outerText")}} |