XML のパースとシリアライズ

場合によっては、XML のコンテンツを解析して DOM ツリーに変換する必要があるでしょう。または逆に、既存の DOM ツリーを XML にシリアライズすることもあります。この記事では、XML のシリアライズと解析の一般的な作業を容易にするため、ウェブプラットフォームで提供されるオブジェクトに注目します。

XMLSerializer

DOM ツリーをシリアライズし、XML を含む文字列に変換します。

DOMParser

XML を含む文字列を解析して DOM ツリーを構築し、入力データに基づいて適切な XMLDocument または Document を返します。

XMLHttpRequest

URL からコンテンツを読み込みます。XML コンテンツは、XML 自体から構築された DOM ツリーを持つ XML Document オブジェクトとして返されます。

XPath

XML 文書の特定の部分のアドレスを含む文字列を作成し、それらのアドレスに基づいて XML ノードを特定する技術。

XML 文書を作成する

次のいずれかの方法で XML 文書を作成します (これは Document のインスタンスです)。

文字列を DOM ツリーにパースする

この例では、DOMParser を使用して文字列の XML フラグメントを DOM ツリーに変換します:

js
const xmlStr = '<q id="a"><span id="b">hey!</span></q>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
// ルート要素の名前またはエラーメッセージを出力します
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  console.log("パース中にエラー発生");
} else {
  console.log(doc.documentElement.nodeName);
}

URL にできるリソースを DOM ツリーにパースする

XMLHttpRequest を使用する

URL アドレス指定が可能な XML ファイルを読み込み解析して DOM ツリーにするサンプルコードを次に示します:

js
const xhr = new XMLHttpRequest();

xhr.onload = () => {
  dump(xhr.responseXML.documentElement.nodeName);
};

xhr.onerror = () => {
  dump("Error while getting XML.");
};

xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();

xhr オブジェクトの responseXML フィールドで返される値は XML の解析により構築された Document です。

document が HTML である場合、上記のコードは Document を返します。document が XML である場合、返されるオブジェクトは XMLDocument になります。この 2 種類は基本的に同じですが、その違いは主に歴史的な部分であり、差別化にはいくつかの実用的な利点があります。

メモ: HTMLDocument インターフェイスもありますが、独立した型であるとは限りません。独立した型として扱うブラウザーもありますが、単なる Document インターフェイスへのエイリアスとしているブラウザーもあります。

XML 文書のシリアライズ

Document がある時、XMLSerializer.serializeToString() メソッドを用いて文章の DOM ツリーを XML にシリアライズし直すことができます。

前の節で作成した XML 文書をシリアライズするには、以下の方法を用いてください。

DOM ツリーを文字列にシリアライズ

まず、DOM ツリーの作成方法で説明された方法で DOM ツリーを作成します。もしくは、XMLHttpRequest で取得した DOM ツリーを用います。

DOM ツリー doc を XML 文字列にシリアライズするには、以下のように XMLSerializer.serializeToString() を呼び出します。

js
const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

HTML 文書のシリアライズ

DOM が HTML 文書である場合、serializeToString() を用いてシリアライズすることもできますが、より単純な方法があります。Element.innerHTML プロパティ (指定したノードの子孫のみを得たい場合) または Element.outerHTML プロパティ (指定したノードとその子孫を得たい場合) を用いればよいです。

js
const docInnerHtml = document.documentElement.innerHTML;

これを実行すると、docHTML は文書の内容、すなわち <body> 要素の内容を表す HTML が入った文字列になります。

このコードを用いると、<body> と その子孫に対応する HTML を得ることができます。

js
const docOuterHtml = document.documentElement.outerHTML;

関連項目