DOM

非同期で取得したXMLをDOM操作して表形式でブラウザ表示します。データ取得後に必要な情報を抽出、Table生成、HTMLへの挿入の一連の流れを、以下を参考に遊んでみる。

• Traversing an HTML table with JavaScript and DOM Interfaces | MDN
• Introduction to using XPath in JavaScript | MDN

JavaScriptの作成

// サーバからのレスポンスをXML形式で受信します
var xmldoc = xmlReq.responseXML;
// 挿入先(content)への参照を取得します
var content = document.getElementById( "content" );
// <table> 要素を生成します
table = document.createElement( "table" );
// <tbody> 要素を生成します
tablebody = document.createElement( "tbody" );
// Track Idのノードコレクションを取得します
var iterator = xmldoc.evaluate( '/dict/key', xmldoc, null, XPathResult.ANY_TYPE, null );
try{
	// イテレータ内のノードセットを取得します
	var thisNode = iterator.iterateNext();
	while (thisNode) {
		// <tr> 要素を生成します
		current_row = document.createElement( "tr" );
		// <td> 要素を生成します
		current_cell = document.createElement( "td" );
		// テキストノードを生成します
		current_text = document.createTextNode( thisNode.textContent );
		// 生成したテキストノードを <td> へ付加します
		current_cell.appendChild( current_text );
		// <td> を <tr> へ付加します
		current_row.appendChild( current_cell );
		// <tr> を <tbody> へ付加します
		tablebody.appendChild( current_row );
		// 次のノードセットを取得します
		thisNode = iterator.iterateNext();
	}
}
catch (e) {
	dump( "Error: Document tree modified during iteraton " + e );
}
// <tbody> を <table> へ付加します
table.appendChild( tablebody );
// <table> を <div id="content"> へ付加します
content.appendChild( table );

確認

腑に落ちない点

evaluate 関数は 5 つのパラメータを取ります。第 4 パラメータとして、評価の結果返して欲しい型を指定する必要があるんですが、使い方が理解できなくて苦労しました。第 1 パラメータで指定した XPath 式によって型は決まると思うので、以下のように指定したのですが、期待した結果が返ってこない。

var iterator = xmldoc.evaluate( '/dict/key[i]', xmldoc, null, XPathResult.STRING_TYPE, null );

仕方ないので、以下のように ANY_TYPE を指定。この場合、指定された XPath 式に対して一番適切な型で結果が返されます。

var iterator = xmldoc.evaluate( '/dict/key', xmldoc, null, XPathResult.ANY_TYPE, null );

で、何が返されるかっていうと、以下のとおり。

XPathResult resultType=4 invalidIteratorState=false ANY_TYPE=0

つまり、XPath 式の結果がノード集合であったことを意味する UNORDERED_NODE_ITERATOR_TYPE と評価されたことになる。うーん、なんで？