2025年3月30日 星期日 甲辰(龙)年 月廿九 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

XML 应用程序

时间:06-04来源:作者:点击数:32

本章演示一些基于 XML, HTML, XML DOM 和 JavaScript 构建的小型 XML 应用程序。


XML 文档实例

在本应用程序中,我们将使用"cd_catalog.xml"文件。


在 HTML div 元素中显示第一个 CD

下面的实例从第一个 CD 元素中获取 XML 数据,然后在 id="showCD" 的 HTML 元素中显示数据。displayCD() 函数在页面加载时调用:

实例

  • x=xmlDoc.getElementsByTagName("CD");
  • i=0;
  • function displayCD()
  • {
  • artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  • title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  • year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
  • txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
  • document.getElementById("showCD").innerHTML=txt;
  • }

添加导航脚本

为了向上面的实例添加导航(功能),需要创建 next() 和 previous() 两个函数:

实例

  • function next()
  • { // display the next CD, unless you are on the last CD
  • if (i<x.length-1)
  • {
  • i++;
  • displayCD();
  • }
  • }
  • function previous()
  • { // displays the previous CD, unless you are on the first CD
  • if (i>0)
  • {
  • i--;
  • displayCD();
  • }
  • }

当点击 CD 时显示专辑信息

最后的实例展示如何在用户点击某个 CD 项目时显示专辑信息:

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
上一篇:XML/HTML 下一篇:XML 命名空间
推荐内容
相关内容
栏目更新
栏目热门