XMLのパーシング - XMLの読み込みと値の取得 - JavaScript

JavaScriptでXMLを読み取りパージングして値を取得するコードを紹介します。

概要

JavaScriptでXMLを扱う場合にはDOMオブジェクトを利用します。また、JavaScriptでXMLを取得するため、XMLHttpRequestを利用します。

プログラム：シンプルな例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
    function getData() {
      var xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            var elem = document.getElementById("output");

            elem.innerHTML += "----- getElementsByTagName -----<br/>";
            var docelem = xmlhttp.responseXML.documentElement;
            var nodes = docelem.getElementsByTagName("name");
            for (i = 0; i < nodes.length; i++) {
              elem.innerHTML += nodes[i].tagName + ":" + nodes[i].textContent + "<br/>";
            }

            var nodes = docelem.getElementsByTagName("height");
            for (i = 0; i < nodes.length; i++) {
              elem.innerHTML += nodes[i].tagName + ":" + nodes[i].textContent + "<br/>";
            }

            var nodes = docelem.getElementsByTagName("weight");
            for (i = 0; i < nodes.length; i++) {
              elem.innerHTML += nodes[i].tagName + ":" + nodes[i].textContent + "<br/>";
            }
            elem.innerHTML += "----------<br/>";
          } else {
            alert("status = " + xmlhttp.status);
          }
        }
      }
      xmlhttp.open("GET", "sample.xml");
      xmlhttp.send();
    }
  </script>
</head>
<body>
  <input id="Button_Get" type="button" value="取得" onclick="getData();" />
  <div>受信情報</div>
  <div id="output"></div>
</body>
</html>

読み込みに利用するXMLは下記とします。

sample.xml

<?xml version="1.0" encoding="utf-8" ?>
<items>
  <item>
    <name>ぺんぎん</name>
    <height>120</height>
    <weight>6.4</weight>
  </item>
  <item>
    <name>にわとり</name>
    <height>32</height>
    <weight>2.8</weight>
  </item>
</items>

解説

下記のコードにより、XMLHttpRequestを利用して、sample.xmlファイルを取得します。

  var xmlhttp = new XMLHttpRequest();
  
  ...

  xmlhttp.open("GET", "sample.xml");
  xmlhttp.send();

XMLHttpRequestが読み込みを完了すると、onreadystatechange イベントが発生します。XMLHttpRequestオブジェクトのreadyState の値を確認し、4であれば読み込み完了と判断します。さらにステータスコードが200であることを確認し、ドキュメントが正常に読み込まれたことを判定します。

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200) {
        .......
      }
    }
  }

readyState の値
値	状態	説明
0	UNSENT	クライアントが作成されました。(XMLHttpRequestが作成されました) open メソッドはまだ呼び出されていません。
1	OPENED	open メソッドが呼び出されした。send メソッドが呼び出されていません。
2	HEADERS	受信用の send メソッドが呼び出されました。ヘッダ値とステータスはまだ利用できない状態です。
3	LOADING	ダウンロード中です。一部のデータを受信しました。 responseBody と responseText ステータスと応答ヘッダーは完全なデータではなく一部分となります。
4	DONE	処理が完了しました。responseBody と responseText プロパティに完全なデータが保持されています。

XMLが正常に取得できると、下記のコードを実行します。

  var elem = document.getElementById("output");

  elem.innerHTML += "----- getElementsByTagName -----<br/>";
  var docelem = xmlhttp.responseXML.documentElement;
  var nodes = docelem.getElementsByTagName("name");
  for (i = 0; i < nodes.length; i++) {
    elem.innerHTML += nodes[i].tagName + ":" + nodes[i].textContent + "<br/>";
  }

  var nodes = docelem.getElementsByTagName("height");
  for (i = 0; i < nodes.length; i++) {
    elem.innerHTML += nodes[i].tagName + ":" + nodes[i].textContent + "<br/>";
  }

  var nodes = docelem.getElementsByTagName("weight");
  for (i = 0; i < nodes.length; i++) {
    elem.innerHTML += nodes[i].tagName + ":" + nodes[i].textContent + "<br/>";
  }
  elem.innerHTML += "----------<br/>";

下記のコードにより、読み込んだXMLのルートノードを取得できます。今回のXMLの場合は"items"ノードになります。

var docelem = xmlhttp.responseXML.documentElement;

getElementsByTagName("name"); メソッドの呼び出しにより、ルートノードの子ノードに存在する "name" タグのノードを取得します。今回の例では、ルートノード以下の子ノードには、nameタグのノードは2つあり、このノードが取得されます。
取得できたノードの個数はlengthプロパティで取得できます。forループで取得できた個数分ループし、画面にノードの値を出力します。ノードへのアクセスは、添え字または、items()メソッドを利用します。ノードのタグ名は"tagName"プロパティで取得でき、ノードのテキスト値は"textContent"プロパティで取得します。

  var nodes = docelem.getElementsByTagName("name");
  for (i = 0; i < nodes.length; i++) {
    elem.innerHTML += nodes[i].tagName + ":" + nodes[i].textContent + "<br/>";
  }

同様の処理で、heightタグの値を取得します。

  var nodes = docelem.getElementsByTagName("height");
  for (i = 0; i < nodes.length; i++) {
    elem.innerHTML += nodes[i].tagName + ":" + nodes[i].textContent + "<br/>";
  }

同様の処理で、weightタグの値を取得します。

  var nodes = docelem.getElementsByTagName("weight");
  for (i = 0; i < nodes.length; i++) {
    elem.innerHTML += nodes[i].tagName + ":" + nodes[i].textContent + "<br/>";
  }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

[取得]ボタンをクリックします。XMLの読み込みが実行され、XMLのタグ名とノードの値が画面に表示されます。

プログラム：アイテムごとのノード単位でアクセスする例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
    function getData() {
      var xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            var elem = document.getElementById("output");

            elem.innerHTML += "----- getElementsByTagName -----<br/>";
            var docelem = xmlhttp.responseXML.documentElement;
            var nodes = docelem.getElementsByTagName("item");
            for (i = 0; i < nodes.length; i++) {
              var namenodes = nodes[i].getElementsByTagName("name");
              elem.innerHTML += namenodes[0].tagName + ":" + namenodes[0].textContent + "<br/>";
              var heightnodes = nodes[i].getElementsByTagName("height");
              elem.innerHTML += heightnodes[0].tagName + ":" + heightnodes[0].textContent + "<br/>";
              var weightnodes = nodes[i].getElementsByTagName("weight");
              elem.innerHTML += weightnodes[0].tagName + ":" + weightnodes[0].textContent + "<br/>";

              elem.innerHTML += "======<br/>";
            }
            elem.innerHTML += "----------<br/>";
          } else {
            alert("status = " + xmlhttp.status);
          }
        }
      }
      xmlhttp.open("GET", "sample.xml");
      //xmlhttp.responseType = "document";
      xmlhttp.send();
    }
  </script>
</head>
<body>
  <input id="Button_Get" type="button" value="取得" onclick="getData();" />
  <div>受信情報</div>
  <div id="output"></div>
</body>
</html>

解説

XMLHttpRequestによる、XMLの取得処理は先のプログラムと同様です。

XMLの取得が成功すると下記のコードを実行します。

  var elem = document.getElementById("output");

  elem.innerHTML += "----- getElementsByTagName -----<br/>";
  var docelem = xmlhttp.responseXML.documentElement;
  var nodes = docelem.getElementsByTagName("item");
  for (i = 0; i < nodes.length; i++) {
    var namenodes = nodes[i].getElementsByTagName("name");
    elem.innerHTML += namenodes[0].tagName + ":" + namenodes[0].textContent + "<br/>";
    var heightnodes = nodes[i].getElementsByTagName("height");
    elem.innerHTML += heightnodes[0].tagName + ":" + heightnodes[0].textContent + "<br/>";
    var weightnodes = nodes[i].getElementsByTagName("weight");
    elem.innerHTML += weightnodes[0].tagName + ":" + weightnodes[0].textContent + "<br/>";

    elem.innerHTML += "======<br/>";
  }
  elem.innerHTML += "----------<br/>";

下記のコードを実行し、取得したXMLのルートノードを取得し、ルートノード以下にある"item"タグを持つ子ノードを取得します。今回のXMLでは"item"タグを持つ2つの子ノードが取得されます。

  var docelem = xmlhttp.responseXML.documentElement;
  var nodes = docelem.getElementsByTagName("item");

forループで"item"タグのノードをループします。

  for (i = 0; i < nodes.length; i++) {
    ...
  }

ループ内で下記のコードを実行します。itemタグ内で、nameタグを持つ子ノードを取得し最初のノードの値を画面に表示します。今回想定しているXMLでは、itemタグ内に、nameタグの要素が1つあるため、getElementsByTagName("name")で取得し最初のnameタグの要素が、ループでのitemタグ内に存在するnameタグになります。同様の処理を、heightタグの子ノード、weightタグの子ノードを取得して実行します。

  var namenodes = nodes[i].getElementsByTagName("name");
  elem.innerHTML += namenodes[0].tagName + ":" + namenodes[0].textContent + "<br/>";
  var heightnodes = nodes[i].getElementsByTagName("height");
  elem.innerHTML += heightnodes[0].tagName + ":" + heightnodes[0].textContent + "<br/>";
  var weightnodes = nodes[i].getElementsByTagName("weight");
  elem.innerHTML += weightnodes[0].tagName + ":" + weightnodes[0].textContent + "<br/>";

  elem.innerHTML += "======<br/>";