9.1 DOMの概要 9.2 DOMプログラミングの基礎 9.3 DOMのプログラミング例 XMLゼミ 9.1 DOMの概要 9.2 DOMプログラミングの基礎 9.3 DOMのプログラミング例 高橋 辰裕
DOMの概要 目的 基本的な考え方 DOM(Document Object Model) プログラムやスクリプトなどから文書の構造にアクセスし、参照や更新を行うためのAPI(Application Programming Interface) 目的 基本的な考え方 多種多様な環境とアプリケーションで使用できるプログラミングの標準インターフェイスの提供 XML文書をツリー構造のままメモリ上に保存して、DOMで定義されたインターフェイスを使って各要素にアクセスする あらゆる要素をノードと考え、コメントやタグに挟まれたテキスト、改行や有効なスペース、ドキュメント全体などもひとつのノードとみなされる (DOMで扱うノードの種類は表9.1を参照)
DOMの概要 XMLパーサーとDOM DOMの仕様 XML文書の構造を検査したり、XML文書の内容をツリー構造にしたりするソフトウェア DOMの仕様にはLevel1、Level2、Level3がある(P191、P192参照)
DOMプログラミングの基礎 XML文書の読み込み 最初に、XMLパーサーを使ってXML文書を読み込むためのオブジェクトを作成する var xmldoc = new ActiveXObject(“microsoft.xmldom”); 次に、読み込みの方法 xmldoc.async = false; そして、XML文書を読み込む命令を書く xmldoc.load(“member.xml”);
DOMプログラミングの基礎 XML文書の変換 DOMのメソッドを使うことで、ドキュメントを操作できる（注 XML文書を読み込みが前提） ver HTMLstr = xmldoc.transformNode(xsldoc); スタイルが適用され、HTML文書に変換
DOMプログラミングの基礎 要素と属性の取り出し ver objNodeList = xmldoc.getElementsByTagName(“member”); 指定したタグの要素を探す var nmember = objNodeList.length; リスト中の要素の数を調べる for(i=0; i<nmember; i++){ var anode = xmldoc.getElementsByTagName(“member”).item(i); var nameNode = anode.firstChild; タグ中のノードを得る
DOMプログラミングの基礎 var nameNodeAttMap = nameNode.attributes; var nattr = name NodeAttMap.length; for(j=0; j<nattr; j++){ var atrnode = nameNodeAttMap.item(j); タグ中の属性を得る var nodeName = atrnode.nodeName; var nvalue = atrnode.nodeValue; var ntype = atrnode.nodeType; それぞれノードの名前、値、型を得る
DOMプログラミングの基礎 XML文書の作成 最初に作成するドキュメントを保存するための新しいXML文書オブジェクトを作成する resultdoc = new ActivXObject(“microsoft.xmldom”); rootとして新しいドキュメントノードを作成する root = resultdoc.documentElement; ルート要素を作成する base = resultdoc.createElement(“html”); resultdoc.appendChild(base); 要素の作成、追加
DOMプログラミングの基礎 子要素の追加方法 var newnode = resultdoc.createElement(“タグ名”); var textnode = resultdoc.createElement(“こんにちは”); newnode.appendChild(textnode); root.appendChild(Newnode) XML文書ならば、スタイルを別に作成し、適用することでHTML文書として表示できる var xsldoc = new ActiveXObject(“microsoft.xmldom”); xsldoc.async = false; xsldoc.lode(“find.xsl”); HTMLstr.innerHTML = resultdoc.transformNode(xsldoc);
DOMのプログラム例 <!– member.html --> <html> <head> <title>member</title> <script language=“JavaScript”> // XML文書とスタイルを読み込んで表示するための関数 ① </script> </head> <body onLoad=“DispXxml(‘mamas.xml’)”> </body> </html>
DOMのプログラム例 Function DispXml(xmldocname) { document.open(); var xmldoc = new ActiveXObject(“microsoft.xmldom”); var xsldoc = new ActiveXObject(“microsoft.xmldom”); xmldoc.async = false; xmldoc.load(xmldocname); xsldoc.load(“member.xsl”); var HTMLstr = xmldoc.transformNode(xsldoc); document.write(HTMLstr); document.close(); }
課題 DOMを用いて簡単なXML文書を作成し、スタイルシートを適用させて表示せよ（javaで）