在接下来的练习中，你将建立一份HTML 网页，内含可以浏览代表整个XML 文件节点的DOM阶层架构的script，由根Document 元素开始。对于每个节点，script 会显示节点的名称、形态和节点值。Script 程序会将每节点的信息区块缩排，依照节点在阶层结构中的层级来排列。你可以使用此网页来显示代表任何XML 文件的节点，和学习到更多有关DOM 如何以节点来将不同形态的XML 文件与文件组件结构化。
建立浏览节点的网页
1. 在文字编辑器中， 开启 一份新的、空白的文本文件，然后输入显示于列表9-9 中的HTML 网页内容。(你可以在随书光盘的 ShowNodes.htm 档案中找到。)
2. 利用文字编辑器的 存盘 指令，将文件储存于本机硬盘中，文件名为 ShowNodes.htm ：
ShowNodes.htm
<!--File Name:ShowNodes.htm -->
<HTML>
<HEAD>
<TITLE>Show DOM Nodes</TITLE>
<SCRIPT LANGUAGE="JavaScript" FOR="window"
EVENT="ONLOAD">
/*get Document node:*/
Document =dsoXML.XMLDocument;
/*start by passing the Document node to
DisplayNodes:*/
DisplayDIV.innerText
=DisplayNodes(Document,0);
function DisplayNodes (Node,IndentLevel)
{
/*declare local variables for
recursion:*/
var i;
var DisplayString ="";
/*build up the indentation for this
level:*/
Indent ="";
IndentDelta =" ";
for (i=0;i <IndentLevel;++i)
Indent +=IndentDelta;
/*display the current node 's
properties:*/
DisplayString +=Indent +"nodeName:"
+Node.nodeName +"\n"
+Indent
+"nodeTypeType:"
+Node.nodeType +"\n"
+Indent
+"nodeTypeString:"
+Node.nodeTypeString
+"\n"
+Indent +"nodeValue:"
+Node.nodeValue +"\n
\n";
/*display each of the node 's attribute
child nodes:*/
Indent +=IndentDelta;
for (i=0;
Node.attributes !=null
&&i <Node.attributes.length;
++i)
DisplayString +=Indent +"nodeName:"
+Node.attributes(i).nodeName +"\n"
+Indent
+"nodeTypeType:"
+Node.attributes(i).nodeType +"\n"
+Indent
+"nodeTypeString:"
+Node.attributes(i).nodeTypeString
+"\n"
+Indent +"nodeValue:"
+Node.attributes(i).nodeValue
+"\n \n";
/*display each of the node 's
nonattribute child
nodes:*/
for (i=0;i <Node.childNodes.length;++i)
DisplayString +=
DisplayNodes
(Node.childNodes(i),IndentLevel +1);
/*return the string containing the
results:*/
return DisplayString;
}
</SCRIPT>
</HEAD>
<BODY>
<XML ID="dsoXML " SRC=="Inventory Dom.xml"></XML>
<H2>XML Document Object Model (DOM)Nodes</H2>
<DIV ID="DisplayDIV"></DIV>
</BODY>
</HTML>
||||||script 程序一开始将Document 节点传给DisplayNodes 函式，此函式会传回该Document 节点及其子节点上的显示信息。Script 程序会将显示信息指定给名为DisplayDIV 的DIV 元素中的innerText 属性，其中DIV 元素是位于网页中的BODY标签中。而网页接着将显示此信息。
DisplayDIV.innerText =DisplayNodes(Document，0);
函式DisplayNodes 的第二个参数指出显示节点资料所使用的缩排等级。函式DisplayNodes 的宣告如下所示：
function DisplayNodes (Node，IndentLevel)
函式的主要执行步骤如下所示：
函式将适当数量的空格符储存在变量Indent 中，此变量被用来在每一行节点信息的一开始建立缩排空间。缩排所用的空格符的个数是由DisplayNodes 的传入参数IndentLevel 所决定：
/*build up the indentation for this level:*/
Indent ="";
IndentDelta =" ";
for (i=0;i <IndentLevel;++i)
Indent +=IndentDelta;
函式会储存目前节点的显示信息－意即，透过Node 参数传送给函式DisplayNodes 的节点（最初是文件节点）：
/*display the current node 's properties:*/
DisplayString +=Indent +"nodeName:"
+Node.nodeName +"\n"
+Indent +"nodeTypeType:"
+Node.nodeType +"\n"
+Indent +"nodeTypeString:"
+Node.nodeTypeString +"\n"
+Indent +"nodeValue:"
+Node.nodeValue +"\n \n";
提示
如果你想要看看每个节点的额外属性，你可以把这些属性加在程序代码区块前。你可以使用表格9-2 中提供的任何的共同节点属性。然而，不要使用任何特定节点形态的属性（例如表格9-3 中属于Document 节点的特定属性），因为并不是所有节点形态都具有这些属性。
函式会储存目前节点子Attribute 节点的显示信息。缩排空间会随着阶层等级的增加而增加，这里阶层等级是代表这些是目前节点的其子节点：
/*display each of the node 's attribute child nodes:*/
Indent +=IndentDelta;
for (i=0;
Node.attributes !=null
&&i <Node.attributes.length;
++i)
DisplayString +=Indent +"nodeName:"
+Node.attributes(i).nodeName +"\n"
+Indent +"nodeTypeType:"
+Node.attributes(i).nodeType +"\n"
+Indent +"nodeTypeString:"
+Node.attributes(i).nodeTypeString
+"\n"
+Indent +"nodeValue:"
+Node.attributes(i).nodeValue
+"\n \n";
注意
函式DisplayNodes 并不会显示Attribute 节点中不必要的子Text 节点，因为从Attribute 节点本身的nodeValue 属性直接取得属性值是更为方便的方法。
借着呼叫这些节点的函式，函式DisplayNodes 会储存每个节点的非属性子节点的显示信息。这些就是所谓递归方式的函式呼叫，如下所示:
/*display each of the node 's nonattribute child nodes:*/
for (i=0;i <Node.childNodes.length;++i)
DisplayString +=
DisplayNodes (Node.childNodes(i)，IndentLevel
+1);
函式DisplayNodes 最后借着传回包含所有节点信息的字符串作为结束：
/*return the string containing the results:*/
return DisplayString;
3. 在Internet Explorer 5 中开启 ShowNodes.htm 档案。
注意，nodeTypeString 属性以小写字符来包含所有的节点形态。（例如，形态「Document」 和 「Processing-Instruction」变成「document」与「processinginstruction」来储存其形态名称）
一开始，网页显示 Inventory Dom.xml 档案中的XML 文件（在列表9-1 与随书光盘中都有提供）。第一部分的显示结果如下面网页中所示。
4. 要观看其它XML 文件的节点结构，可以编辑网页的data island 来达成。例如，要观看档案Inventory Valid Entity.xml（列表6-1 和随书光盘中都有提供）的节点结构，你可以将data island 的数据修改如下:
<XML ID="dsoXML " SRC="Inventory Valid Entity.xml"></XML>
