ash | サーバ構築 | Linux | ホームページ作成 | プログラム | その他

XMLとDOMについて

DOMとは

　XML上でスクリプトを使う時の標準化の方法として、W3Cによって検討されているDOMがあります。 DOMは、Document Object Modelの略で、XML文書の内容や構造に対して、スクリプトやプログラムを使って動的にアクセスすることを可能にするための規格です。 DOMでは、プラットフォームや言語に依存しない中立的なアプリケーションインターフェイス(API)を提供します。
　このページのサンプルでは、Microsoftの独自拡張の部分もありますが、IE5.0とJavaScriptを使っています。 その他の環境では動作確認はしていません。XMLを利用するときの参考程度にしてください。

XMLファイルとXSLファイルの切り替え

　IE5.0のDOMを使って、XMLファイルとXSLファイルの切り替えてみます。 IE5.0では、ActiveXとJavaScriptまたはVBSciptで実現しています。 スクリプトは、HTMLファイル内に記述します。
　それでは、以下の内容のHTMLファイルを作成してみましょう。

disp_xml.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ノード情報の表示</title>
<link rev="made" href="mailto:wmaster@ash.or.jp">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
<!--
var objXML, objXSL;  // XMLDOMオブジェクト
var fileXML, fileXSL; // XMLファイル名

function init() {
  // 初期化
  fileXML = 'addr.xml';
  fileXSL = 'addr.xsl';

  // XMLオブジェクトの初期化
  objXML = new ActiveXObject('microsoft.XMLDOM');
  objXML.async = false;
  document.forms[0].fileXML.value = fileXML;
  objXML.load(fileXML);

  // XSLオブジェクトの初期化
  objXSL = new ActiveXObject('microsoft.XMLDOM');
  objXSL.async = false;
  document.forms[0].fileXSL.value = fileXSL;
  objXSL.load(fileXSL);

  // XMLデータの表示
  show();
}

function show() {
  // XMLデータの表示
  dsp.innerHTML = objXML.transformNode(objXSL);
}

function push() {
  // ファイルの選択
  fileXML = document.forms[0].fileXML.value;
  objXML.load(fileXML);

  fileXSL = document.forms[0].fileXSL.value;
  objXSL.load(fileXSL);

  show();
}
-->
</script>
</head>
<body onload="init()">

<form><table><tr>
<td>XMLファイル名</td>
<td><input type="text" name="fileXML"></td>
<td>XSLファイル名</td>
<td><input type="text" name="fileXSL"></td>
<td><input type="button" name="btn" value="OK" onClick="push()"></td>
</tr></table></form>
<hr>

<div id="dsp"></div>

</body>
</html>

　まず、new ActiveXObject('Microsoft.XMLDOM');命令で、オブジェクトを生成します。 オブジェクトは、XML用(xmlObj)とXSL用(xslObj)の2つ生成します。 XSLは、XMLの文法で記述されているので、XMLプロセッサをそのまま使えます。
　オブジェクトを生成したら、loadメソッドで、それぞれのファイルを読み込みます。
　表示は、innerHTMLに、transformNodeメソッドで、XSLファイルを使ってHTMLデータに変換して表示します。

　IE5.0でのみ動作します。 ソースでは、任意のファイル名を入力することができますが、セキュリティ上問題があるため、特定のファイルしか表示できないようにしてあります。

ノード情報の表示

　XMLパーサによって解析したデータを、DOMのアクセスメソッドを使って、各ノードの情報を表示してみます。 ノード情報には、階層レベル、ノード名、ノード値、ノードタイプなどがあります。
　それでは、以下の内容のHTMLファイルを作成してみましょう。

disp_node.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ノード情報の表示</title>
<link rev="made" href="mailto:wmaster@ash.or.jp">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
<!--
var obj;  // XMLDOMオブジェクト
var file; // XMLファイル名

function init() {
  // 初期化
  file = 'addr.xml';

  // XMLDOMオブジェクトの生成
  obj = new ActiveXObject('microsoft.XMLDOM');
  obj.async = false;

  // XMLファイルの読み込み
  document.forms[0].file.value = file;
  obj.load(file);

  // ノード情報の表示
  show();
}

function show() {
  // ノード情報の表示
  var dspStr = '';

  dspStr += '<table border=\"1\"><tr>';
  dspStr += '<th>階層レベル</th>';
  dspStr += '<th>ノード名(nodeName)</th>';
  dspStr += '<th>ノード値(nodeValue)</th>';
  dspStr += '<th>ノード値(text)</th>';
  dspStr += '<th>ノードタイプ(nodeType)</th>';
  dspStr += '<th>属性(attributes)</th>';
  dspStr += '</tr>';
  dspStr += showChild(obj, 0);
  dspStr += '</table>';
  dsp.innerHTML = dspStr;
}

function showChild(obj, level) {
  // 子ノードの表示
  var node, nodes;
  var str = '';
  var i = 0;

  str += '<tr><td>';

  // 階層レベルの表示
  for(i = 0; i < level; i++) { str += '+'; }
  str += level;
  str += '</td><td>';
  level++;

  // ノード名の表示
  str += obj.nodeName;
  str += '</td><td>';

  // ノード値の表示
  str += obj.nodeValue;
  str += '</td><td>';
  str += obj.text;
  str += '</td><td>';

  // ノードタイプの表示
  str += obj.nodeType + ':';
  str += obj.nodeTypeString;
  str += '</td><td>';

  // 属性の表示
  nodes = obj.attributes;
  if(nodes != null) {
    for(i = 0; i < nodes.length; i++) {
      node = nodes.item(i);
      if(i > 0) { str += ', '; }
      str += node.nodeName + '=';
      str += node.nodeValue;
    }
  }
  str += '</td></tr>';

  // 子ノードの表示
  for(node = obj.firstChild; node != null; node = node.nextSibling) {
    str += showChild(node, level);
  }

  return(str);
}

function push() {
  // XMLファイルの選択
  file = document.forms[0].file.value;
  obj.load(file);
  show();
}
-->
</script>
</head>
<body onload="init()">

<form><table><tr>
<td>XMLファイル名</td>

<td><select name="file" onChange="push()">
<option value="addr.xml">addr.xml</option>
<option value="addr.xsl">addr.xsl</option>
<option value="addrcard.xsl">addrcard.xsl</option>
</select></td>
<!--
<td><input type="text" name="file"></td>
-->

<!--
<td><input type="button" name="btn" value="OK" onClick="push()"></td>
-->
</tr></table></form>
<hr>

<h1>ノード情報の表示</h1>

<div id="dsp"></div>

</body>
</html>

　オブジェクトを作成した後、ルートノードから、再帰的に子ノードを検索します。
　firstChildメソッドで最初の子ノードの一覧を取得し、nextSiblingで、次のノードを取得します。
　ノード情報は、nodeNameメソッド、nodeValue, nodeTypedValueメソッド、nodeType, nodeTypeStringメソッドを使って、取得して表示します。
　属性情報は、attributeメソッドで属性ノードのリストを取得し、item(i)で、各ノードオブジェクトの内容を表示しています。

　IE5.0があれば、サンプルの住所録データのXMLのノード情報を表示できます。
　ソースでは、任意のXMLファイル名を入力することができますが、セキュリティ上問題があるため、特定のファイルのノード情報しか表示できないようにしてあります。 ファイル名を変更したい場合は、ソースをダウンロードしてコメントをはずしてください。 XSLファイルもXMLの文法で記述されているので、テキストボックスにXSLファイル名を入力すると、XSLのノード情報も表示することができます。

[ASHのホームページへ]
Copyright (C)1998-1999 ASH multimedia lab.
mail : wmaster@ash.or.jp