initial commit

1 files changed, 115 insertions, 0 deletions

diff --git a/files/ja/web/guide/parsing_and_serializing_xml/index.html b/files/ja/web/guide/parsing_and_serializing_xml/index.html
new file mode 100644
index 0000000000..9adb073f0c
--- /dev/null
+++ b/files/ja/web/guide/parsing_and_serializing_xml/index.html
@@ -0,0 +1,115 @@
+---
+title: XML のパースとシリアライズ
+slug: Web/Guide/Parsing_and_serializing_XML
+tags:
+  - AJAX
+  - Add-ons
+  - DOM
+  - DOM Parsing
+  - Extensions
+  - Guide
+  - HTMLDocument
+  - JSON
+  - Parsing
+  - Parsing XML
+  - Serializing
+  - Serializing XML
+  - XML
+  - XMLDocument
+  - XMLHttpRequest
+translation_of: Web/Guide/Parsing_and_serializing_XML
+---
+<p>場合によっては、{{Glossary("XML")}} のコンテンツを解析して {{Glossary("DOM")}} ツリーに変換する必要があるでしょう。または逆に、既存の DOM ツリーを XML にシリアライズすることもあります。<span class="seoSummary">この記事では、XML のシリアライズと解析の一般的な作業を容易にするため、ウェブプラットフォームで提供されるオブジェクトに注目します。</span></p>
+
+<dl>
+ <dt>{{domxref("XMLSerializer")}}</dt>
+ <dd>DOM ツリーをシリアライズし、XML を含む文字列に変換します。</dd>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd>XML を含む文字列を解析して DOM ツリーを構築し、入力データに基づいて適切な {{domxref("XMLDocument")}} または {{domxref("Document")}} を返します。</dd>
+ <dt>{{domxref("XMLHttpRequest")}}</dt>
+ <dd>URL からコンテンツを読み込みます。XML コンテンツは、XML 自体から構築された DOM ツリーを持つ XML {{domxref("Document")}} オブジェクトとして返されます。</dd>
+ <dt><a href="/ja/docs/XPath">XPath</a></dt>
+ <dd>XML 文書の特定の部分のアドレスを含む文字列を作成し、それらのアドレスに基づいて XML ノードを特定する技術。</dd>
+</dl>
+
+<h2 id="Creating_an_XML_document" name="Creating_an_XML_document">XML 文書を作成する</h2>
+
+<p>次のいずれかの方法で XML 文書を作成します (これは {{domxref("Document")}} のインスタンスです)。</p>
+
+<h3 id="Parsing_strings_into_DOM_trees" name="Parsing_strings_into_DOM_trees">文字列を DOM ツリーにパースする</h3>
+
+<p>この例では、{{domxref("DOMParser")}} を使用して文字列の XML フラグメントを DOM ツリーに変換します:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js notranslate">const xmlStr = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;';
+const parser = new DOMParser();
+const dom = parser.parseFromString(xmlStr, "application/xml");
+// print the name of the root element or error message
+console.log(dom.documentElement.nodeName == "parsererror" ? "error while parsing" : dom.documentElement.nodeName);
+</pre>
+</div>
+
+<h3 id="Parsing_URL-addressable_resources_into_DOM_trees" name="Parsing_URL-addressable_resources_into_DOM_trees">URL にできるリソースを DOM ツリーにパースする</h3>
+
+<h4 id="Using_XMLHttpRequest" name="Using_XMLHttpRequest">XMLHttpRequest を使用する</h4>
+
+<p>URL アドレス指定が可能な XML ファイルを読み込み解析して DOM ツリーにするサンプルコードを次に示します:</p>
+
+<pre class="brush: js notranslate">const xhr = new XMLHttpRequest();
+
+xhr.onload = function() {
+  dump(xhr.responseXML.documentElement.nodeName);
+}
+
+xhr.onerror = function() {
+  dump("Error while getting XML.");
+}
+
+xhr.open("GET", "example.xml");
+xhr.responseType = "document";
+xhr.send();
+</pre>
+
+<p><code>xhr</code> オブジェクトの {{domxref("XMLHttpRequest.responseXML", "responseXML")}} フィールドで返される値は XML の解析により構築された {{domxref("Document")}} です。</p>
+
+<p>document が {{Glossary("HTML")}} である場合、上記のコードは {{domxref("Document")}} を返します。document が XML である場合、返されるオブジェクトは {{domxref("XMLDocument")}} になります。この 2 種類は基本的に同じですが、その違いは主に歴史的な部分であり、差別化にはいくつかの実用的な利点があります。</p>
+
+<div class="note">
+<p><strong>Note:</strong> There is in fact an {{domxref("HTMLDocument")}} interface as well, but it is not necessarily an independent type. In some browsers it is, while in others it is simply an alias for the <code>Document</code> interface.</p>
+</div>
+
+<h2 id="Serializing_an_XML_document" name="Serializing_an_XML_document">XML 文書のシリアライズ</h2>
+
+<p>Given a {{domxref("Document")}}, you can serialize the document's DOM tree back into XML using the {{domxref("XMLSerializer.serializeToString()")}} method.</p>
+
+<p>Use the following approaches to serialize the contents of the XML document you created in the previous section.</p>
+
+<h3 id="Serializing_DOM_trees_to_strings" name="Serializing_DOM_trees_to_strings">DOM ツリーを文字列にシリアライズ</h3>
+
+<p>First, create a DOM tree as described in <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a>. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}.</p>
+
+<p>To serialize the DOM tree <code>doc</code> into XML text, call {{domxref("XMLSerializer.serializeToString()")}}:</p>
+
+<pre class="brush: js notranslate">const serializer = new XMLSerializer();
+const xmlStr = serializer.serializeToString(doc);</pre>
+
+<h3 id="Serializing_HTML_documents" name="Serializing_HTML_documents">HTML 文書のシリアライズ</h3>
+
+<p>If the DOM you have is an HTML document, you can serialize using <code>serializeToString()</code>, but there is a simpler option: just use the {{domxref("Element.innerHTML")}} property (if you want just the descendants of the specified node) or the {{domxref("Element.outerHTML")}} property if you want the node and all its descendants.</p>
+
+<pre class="brush: js notranslate">const docInnerHtml = document.documentElement.innerHTML;
+</pre>
+
+<p>As a result, <code>docHTML</code> is a {{domxref("DOMString")}} containing the HTML of the contents of the document; that is, the {{HTMLElement("body")}} element's contents.</p>
+
+<p>You can get HTML corresponding to the <code>&lt;body&gt;</code> <em>and</em> its descendants with this code:</p>
+
+<pre class="brush: js notranslate">const docOuterHtml = document.documentElement.outerHTML;</pre>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li><a class="internal" href="/ja/XPath" title="ja/XPath">XPath</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("Document")}}, {{domxref("XMLDocument")}} および {{domxref("HTMLDocument")}}</li>
+</ul>