扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
DomDemo Variable.htm
<!--File Name:DomDemo Variable.htm -->
<HTML>
<HEAD>
<TITLE>Book Inventory</TITLE>
<SCRIPT LANGUAGE="javascript" FOR="window" EVENT="ONLOAD">
HTMLCode ="";
Document =dsoInventory.XMLDocument;
for (i=0;
i <Document.documentElement.childNodes.length;
i++)
{
HTMLCode +=
"<SPAN STYLE=''font-style:italic''>Title:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(0).text
+"<BR>"
+"<SPAN STYLE=''font-style:italic''>Author:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(1).text
+"<BR>"
+"<SPAN STYLE=''font-style:italic''>Binding:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(2).text
+"<BR>"
+"<SPAN STYLE=''font-style:italic''>Number of pages:"
+"</SPAN>"
+Document.documentElement.childNodes(i).childNodes(3).text
+"<BR>"
+"<SPAN STYLE=''font-style:italic >Price:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(4).text
+"<P>";
}
DisplayDIV.innerHTML=HTMLCode;
</SCRIPT>
</HEAD>
<BODY>
<XML ID="dsoInventory" src=http://www.ddvip.com/web/xml/index1/"Inventory.xml"></XML>
<H2>Book Inventory</H2>
<DIV ID="DisplayDIV"></DIV>
</BODY>
</HTML>
范例网页的script 利用length 属性来决定包含在根元素之内的BOOK 元素的数量。(length 属性是根元素节点的childNodes 属性所提供NodeList 集合对象的成员之一。请参考 表格9-4 。)这份script 中包含了一个for 循环,循环每执行一次,就是处理一个BOOK 元素,另外script中也包含了显示这些元素的程序代码。
for (i=0;i <Document.documentElement.childNodes.length;i++)
{
/*code to display a BOOK element...*/
}
因为BOOK 元素的个数是未知的,所以网页不能在BODY 标签中使用一组固定的SPAN 元素来显示数据(列表9-3 中的先前的范例网页就是这样)。更确切的说,对于每个BOOK 元素,script程序会动态地产生显示元素所需的整个HTML 标签区块:
for (i=0;i <Document.documentElement.childNodes.length;i++)
{
HTMLCode +=
"<SPAN STYLE=''font-style:italic''>Title:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(0).text
+"<BR>"
+"<SPAN STYLE=''font-style:italic''>Author:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(1).text
+"<BR>"
+"<SPAN STYLE=''font-style:italic''>Binding:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(2).text
+"<BR>"
+"<SPAN STYLE=''font-style:italic''>Number of pages: "
+"</SPAN>"
+Document.documentElement.childNodes(i).childNodes(3).text
+"<BR>"
+"<SPAN STYLE=''font-style:italic''>Price:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(4).text
+"<P>";
}
Script 程序将所有HTML 的卷标区块储存于变量HTMLCode 中。在for 循环之后,当所有区块已经产生且储存于HTMLCode 中时,script 会将HTML 卷标指定到网页BODY 卷标中DIV 元素的属性innerHTML(此元素的ID 为DisplayDIV)中:
DisplayDIV.innerHTML=HTMLCode;
然后DIV 元素会立即产生HTML 程序并显示其结果,即先前所见的图片。
为了让自己确信,无论XML 文件中包含的BOOK 元素数量是多少,网页都能正常运作,你可以编辑网页中的data island,来显示Inventory Big.xml。其中Inventory Big.xml 中BOOK 元素的数量是Inventory.xml 所含元素数量的两倍:
<XML ID="dsoInventory" src=http://www.ddvip.com/web/xml/index1/"Inventory Big.xml"></XML>
如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击|2021世界人工智能大会
直击5G创新地带,就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020(Cloud)- 科技行者