search
LoginSignup
55
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Organization

クライアントサイドJavaScriptでXML文書のDOMをパースする

クライアントサイドで JavaScriptでFileReaderを使用してファイルの処理をする際、稀にXML文書を処理する必要に迫られることがあります。その時必要な実装の例と注意点を記載します。

XMLHttpRequestとFileReaderの違い

XMLHttpRequestの場合、ブラウザがデフォルトでDOMを構築するため、そのDOMを元に文書の処理をできますが、FileReaderからXML文書を処理する場合はファイルをテキストとして処理するか、バイナリとして処理するかのどちらかしか無いため、プログラム側で明示的にDOMを構築させる必要があります。

実装例

デモ

下記のようなXMLファイルをJavaScriptで読み込む場合、

test1.xml
<doc>
  <title id="doc-title">テストXML文書</title>
  <chapter class="chapter first-chapter" id="chapter-1">
    <paragraph class="paragraph first-paragraph last-paragraph">
    </paragraph>
  </chapter>
  <chapter class="chapter" id="chapter-2">
    <paragraph class="paragraph first-paragraph">
    </paragraph>
    <paragraph class="paragraph">
    </paragraph>
    <paragraph class="paragraph last-paragraph">
    </paragraph>
  </chapter>
  <chapter class="chapter last-chapter" id="chapter-3">
    <paragraph class="paragraph first-paragraph">
    </paragraph>
    <paragraph class="paragraph last-paragraph">
    </paragraph>
  </chapter>
</doc>

XMLのDOMは DOMParser.parseFromString を使用することでDOMを構築できます。

parse_xml.js
    // files変数は File オブジェクト
    var file = files[0];
    var reader = new FileReader();
    reader.addEventListener('load', parseXML, false);
    reader.readAsText(file);

    function parseXML(e){
        'use strict';
        var xml = e.target.result;
        // XMLのDOMをパースする
        var parser = new DOMParser();
        var dom = parser.parseFromString(xml, 'text/xml');
    }

後は、dom変数に対して、 document.querySelectorAll メソッドや document.getElementsByTagName メソッドを使用することで、目的となる要素を取得することが可能になります。

parse_xml2.js
    // files変数は File オブジェクト
    var file = files[0];
    var reader = new FileReader();
    reader.addEventListener('load', parseXML, false);
    reader.readAsText(file);

    function parseXML(e){
        'use strict';
        var xml = e.target.result;
        // XMLのDOMをパースする
        var parser = new DOMParser();
        var dom = parser.parseFromString(xml, 'text/xml');
        var title = dom.getElementById('doc-title').textContent;
        console.log(title);
        var paragraphs = dom.getElementsByTagName('paragraph').length;
        console.log(paragraphs);
        var result = dom.querySelectorAll('.chapter > .first-paragraph').length;
        console.log(result);
    }

注意点

Webworker上では、DOMに関するメソッドを使用できないため、ファイルを Webworkerで処理することは不可能です。そのため、Webworkerを使ったファイルの処理高速化の恩恵を受けることはできません。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
55
Help us understand the problem. What are the problem?