• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

XML 应用程序

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

XML 应用程序


本章演示一些基于 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 项目时显示专辑信息:

尝试一下

如需了解更多关于使用 JavaScript 和 XML DOM 的信息,请访问我们的 XML DOM 教程


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
XML 命名空间发布时间:2022-02-03
下一篇:
在 HTML 页面中显示 XML 数据发布时间:2022-02-03
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap