DOM Parsingを使ってDOMオブジェクトを作成

jQueryの$.parseXMLでXML形式をオブジェクト化できる。HTML5のDOM Parsing APIでも同様にXML形式をオブジェクト化することができる。
方法は次のようにする。

var parser = new DOMParser();     // DOMParserオブジェクトを生成する
var doc = parser.parseFromString(XML形式のデータ,"text/xml");  // parseFromStringメソッドを呼び出す

上記の2行でXML形式をオブジェクト化できる。

XML形式のファイルを読み込みオブジェクト化するサンプルコード

<script type="text/javascript">
$(function(){
  var url = 'picdef.xml'; 
  $.get(url,$.noop,'html').done(function(data,statusText,jqXHR){
    // 読み込んだXMLから配列を作る
    var parser = new DOMParser();
    var doc = parser.parseFromString(data,"text/xml");
    var customers = doc.getElementsByTagName('customer');
    for(var i = 0;i<customers.length; i++){
      var div = $('<div>').appendTo(document.body);
      var ul = $('<ul>').appendTo(div);
      var customer = customers.item(i);
      var node = customer.getElementsByTagName('title').item(0);
      var title_string = node.firstChild.nodeValue;
      $('<li>',{text:title_string}).appendTo(ul);
      var node = customer.getElementsByTagName('thmb').item(0);
      var thmb_name = node.firstChild.nodeValue;
      $('<li>',{text:thmb_name}).appendTo(ul);
      var node = customer.getElementsByTagName('name').item(0);
      var file_name = node.firstChild.nodeValue;
      $('<li>',{text:file_name}).appendTo(ul);
    }
  }).error(function(jqXHR,statusText,error){
    alert('エラー ' + error.message);
  });
});
</script>