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/domparser/index.html | 214 ++++++++++++++++++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100644 files/ja/web/api/domparser/index.html (limited to 'files/ja/web/api/domparser') 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 +--- +

{{APIRef("DOM")}}

+ +

DOMParser インターフェイスは、 {{Glossary("XML")}} や {{Glossary("HTML")}} ソースコードを文字列から DOM の {{domxref("Document")}} に解釈する機能を提供します。

+ +
+

注: {{domxref("XMLHttpRequest")}} は URL で指すことができるリソースから直接 XML や HTML を解釈することができ、 Document を {{domxref("XMLHttpRequest.response", "response")}} プロパティでを返します。

+
+ +

{{domxref("XMLSerializer")}} インターフェイスを使い、DOM ツリーを XML もしく HTML ソースに転換する、逆の操作を行うことができます。

+ +

HTML 文書の場合、{{domxref("Element.innerHTML")}} や {{domxref("Element.outerHTML", "outerHTML")}} プロパティの値を設定することで、HTML から構築された新しい DOM ツリーに一部分を置き換えることもできます。DOM のサブツリーに対応した HTML の要素を取り込むために、これらのプロパティを読み込むことも可能です。

+ +

構文

+ +
let domparser = new DOMParser()​​
+ +

メソッド

+ +

{{domxref("DOMParser.parseFromString()", "", "", "1")}}

+ +

構文

+ +
let doc = domparser.parseFromString(string, mimeType)
+ +

返値

+ +

mimeType 引数に依存した {{domxref("Document")}} もしくは {{domxref("XMLDocument")}}。

+ +

引数

+ +

このメソッドには 2 つの引数があります (両方とも必須):

+ +
+
string
+
{{domxref("DOMString")}} にパースされます。{{Glossary("HTML")}}、{{Glossary("xml")}}、{{Glossary("xhtml+xml")}} もしくは {{Glossary("svg")}} 文書が含まれなければなりません。
+
mimeType
+
+

{{domxref("DOMString")}}。この文字列はメソッドの戻り値のクラスを決定します。メソッドの戻り値は下記の通りです:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
mimeTypedoc.constructor
text/html{{domxref("Document")}}
text/xml{{domxref("XMLDocument")}}
application/xml{{domxref("XMLDocument")}}
application/xhtml+xml{{domxref("XMLDocument")}}
image/svg+xml{{domxref("XMLDocument")}}
+
+
+ +

例

+ +

XML のパース

+ +

パーサーオブジェクトを作成すると、parseFromString() メソッドを用いて 文字列から XML をパースすることができます:

+ +
let parser = new DOMParser()
+let doc = parser.parseFromString(stringContainingXMLSource, "application/xml")
+
+ +

エラーのハンドリング

+ +

現在は、パース処理に失敗した場合、DOMParser は例外をスローせず、代わりにエラー文書を返すという点に注意して下さい:

+ +
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
+  (error description)
+  <sourcetext>(a snippet of the source XML)</sourcetext>
+</parsererror>
+
+ +

パースエラーは、ソースのエラー同様、エラーコンソール にもエラーの発生した文書の URI (後述) とともに表示されます。

+ +

SVG および HTML 文書のパース

+ +

DOMParser は SVG 文書のパース {{geckoRelease("10.0")}}、そして HTML 文書のパース {{geckoRelease("12.0")}} にも用いることができます。指定された MIME type によって 3 つの異なる結果となります。

+ +
    +
  1. MIME type が text/xml の場合、XMLDocument が返されます。
    2. +
  2. MIME type が image/svg+xml の場合、SVGDocument が返されます。
    3. +
  3. MIME type が text/html の場合、HTMLDocument が返されます。
    4. +
+ +
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 です。
+
+ +

DOMParser HTML 拡張機能

+ +
/*
+ * 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));
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-parsing-and-serialization', 'DOM parsing')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.DOMParser", 3)}}

+ +

関連情報

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