diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/domparser/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/web/api/domparser/index.html')
-rw-r--r-- | files/ja/web/api/domparser/index.html | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/files/ja/web/api/domparser/index.html b/files/ja/web/api/domparser/index.html new file mode 100644 index 0000000000..44500cc213 --- /dev/null +++ b/files/ja/web/api/domparser/index.html @@ -0,0 +1,214 @@ +--- +title: DOMParser +slug: Web/API/DOMParser +tags: + - API + - DOM + - DOM Parsing + - Document + - HTML + - HTMLDocument + - MakeBrowserAgnostic + - NeedsMarkupWork + - Parsing + - Reference + - SVG + - XML + - XMLDocument +translation_of: Web/API/DOMParser +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary"><strong><code>DOMParser</code></strong> インターフェイスは、 {{Glossary("XML")}} や {{Glossary("HTML")}} ソースコードを文字列から DOM の {{domxref("Document")}} に解釈する機能を提供します。</span></p> + +<div class="note"> +<p><strong>注:</strong> {{domxref("XMLHttpRequest")}} は URL で指すことができるリソースから直接 XML や HTML を解釈することができ、 <code>Document</code> を {{domxref("XMLHttpRequest.response", "response")}} プロパティでを返します。</p> +</div> + +<p>{{domxref("XMLSerializer")}} インターフェイスを使い、DOM ツリーを XML もしく HTML ソースに転換する、逆の操作を行うことができます。</p> + +<p>HTML 文書の場合、{{domxref("Element.innerHTML")}} や {{domxref("Element.outerHTML", "outerHTML")}} プロパティの値を設定することで、HTML から構築された新しい DOM ツリーに一部分を置き換えることもできます。DOM のサブツリーに対応した HTML の要素を取り込むために、これらのプロパティを読み込むことも可能です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <var>domparser</var> = new DOMParser()</pre> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<h3 id="domxrefDOMParser.parseFromString_1">{{domxref("DOMParser.parseFromString()", "", "", "1")}}</h3> + +<h4 id="Syntax_2" name="Syntax_2">構文</h4> + +<pre class="syntaxbox notranslate">let <var>doc</var> = domparser.parseFromString(<var>string, <var>mimeType</var>)</var></pre> + +<h4 id="Return" name="Return">返値</h4> + +<p><strong><code><a href="#Argument02">mimeType</a></code></strong> 引数に依存した {{domxref("Document")}} もしくは {{domxref("XMLDocument")}}。</p> + +<h4 id="Parameters" name="Parameters">引数</h4> + +<p>このメソッドには 2 つの引数があります (両方とも必須):</p> + +<dl> + <dt><code><var>string</var></code></dt> + <dd>{{domxref("DOMString")}} にパースされます。{{Glossary("HTML")}}、{{Glossary("xml")}}、{{Glossary("xhtml+xml")}} もしくは {{Glossary("svg")}} 文書が含まれなければなりません。</dd> + <dt id="Argument02"><code><var>mimeType</var></code></dt> + <dd> + <p>{{domxref("DOMString")}}。この文字列はメソッドの戻り値のクラスを決定します。メソッドの戻り値は下記の通りです:</p> + + <table class="standard-table" style="max-width: 60ch;"> + <thead> + <tr> + <th scope="col"><code><var>mimeType</var></code></th> + <th scope="col"><code><var>doc</var>.constructor</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>text/html</code></td> + <td><code>{{domxref("Document")}}</code></td> + </tr> + <tr> + <td><code>text/xml</code></td> + <td><code>{{domxref("XMLDocument")}}</code></td> + </tr> + <tr> + <td><code>application/xml</code></td> + <td><code>{{domxref("XMLDocument")}}</code></td> + </tr> + <tr> + <td><code>application/xhtml+xml</code></td> + <td><code>{{domxref("XMLDocument")}}</code></td> + </tr> + <tr> + <td><code>image/svg+xml</code></td> + <td><code>{{domxref("XMLDocument")}}</code></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Parsing_XML" name="Parsing_XML">XML のパース</h3> + +<p>パーサーオブジェクトを作成すると、<code>parseFromString()</code> メソッドを用いて 文字列から XML をパースすることができます:</p> + +<pre class="brush: js notranslate">let <var>parser</var> = new DOMParser() +let <var>doc</var> = parser.parseFromString(<var>stringContainingXMLSource</var>, "application/xml") +</pre> + +<h4 id="Error_handling" name="Error_handling">エラーのハンドリング</h4> + +<p>現在は、パース処理に失敗した場合、<code>DOMParser</code> は例外をスローせず、代わりにエラー文書を返すという点に注意して下さい:</p> + +<pre class="brush:xml notranslate"><parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> + <var>(error description)</var> + <sourcetext><var>(a snippet of the source XML)</var></sourcetext> +</parsererror> +</pre> + +<p>パースエラーは、ソースのエラー同様、<a href="/ja/docs/Error_Console">エラーコンソール</a> にもエラーの発生した文書の URI (後述) とともに表示されます。</p> + +<h3 id="Parsing_an_SVG_or_HTML_document" name="Parsing_an_SVG_or_HTML_document">SVG および HTML 文書のパース</h3> + +<p><code>DOMParser</code> は SVG 文書のパース {{geckoRelease("10.0")}}、そして HTML 文書のパース {{geckoRelease("12.0")}} にも用いることができます。指定された MIME type によって 3 つの異なる結果となります。</p> + +<ol> + <li>MIME type が <code>text/xml</code> の場合、<code>XMLDocument</code> が返されます。</li> + <li>MIME type が <code>image/svg+xml</code> の場合、<code>SVGDocument</code> が返されます。</li> + <li>MIME type が <code>text/html</code> の場合、<code>HTMLDocument</code> が返されます。</li> +</ol> + +<pre class="brush: js notranslate">let parser = new DOMParser() +let doc = parser.parseFromString(stringContainingXMLSource, "application/xml") +// Document を返しますが、 SVGDocument でも HTMLDocument でもありません + +parser = new DOMParser(); +doc = parser.parseFromString(stringContainingSVGSource, "image/svg+xml") +// SVGDocument を返しますが、これも Document です。 + +parser = new DOMParser(); +doc = parser.parseFromString(stringContainingHTMLSource, "text/html") +// HTMLDocument を返しますが、これも Document です。 +</pre> + +<h2 id="DOMParser_HTML_extension" name="DOMParser_HTML_extension">DOMParser HTML 拡張機能</h2> + +<pre class="brush: js notranslate">/* + * DOMParser HTML extension + * 2012-09-04 + * + * By Eli Grey, http://eligrey.com + * Public domain. + * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. + */ + +/*! @source https://gist.github.com/1129031 */ +/*global document, DOMParser*/ + +(function(DOMParser) { + "use strict"; + + var proto = DOMParser.prototype, + nativeParse = proto.parseFromString; + + // Firefox/Opera/IE throw errors on unsupported types + try { + // WebKit returns null on unsupported types + if ((new DOMParser()).parseFromString("", "text/html")) { + // text/html parsing is natively supported + return; + } + } catch (ex) {} + + proto.parseFromString = function(markup, type) { + if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { + var doc = document.implementation.createHTMLDocument(""); + if (markup.toLowerCase().indexOf('<!doctype') > -1) { + doc.documentElement.innerHTML = markup; + } else { + doc.body.innerHTML = markup; + } + return doc; + } else { + return nativeParse.apply(this, arguments); + } + }; +}(DOMParser)); +</pre> + +<h2 id="Specifications" name="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('HTML WHATWG', '#dom-parsing-and-serialization', 'DOM parsing')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.DOMParser", 3)}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Parsing_and_serializing_XML">XML のパースとシリアライズ</a></li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li>{{domxref("XMLSerializer")}}</li> + <li>{{jsxref("JSON.parse()")}} - {{jsxref("JSON")}} 文書での同様のページ</li> +</ul> |