雷林鹏分享:XML 应用程序
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 + "
Title: " + title + "
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)< p="">
{
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 教程。
本文转载自:w3cschool
(编辑:雷林鹏 来源:网络)
雷林鹏分享:XML 应用程序的更多相关文章
- 雷林鹏分享: XML CDATA
XML CDATA XML 文档中的所有文本均会被解析器解析. 只有 CDATA 区段中的文本会被解析器忽略. PCDATA - 被解析的字符数据 XML 解析器通常会解析 XML 文档中所有的文本. ...
- 雷林鹏分享:C# 程序结构
C# 程序结构 在我们学习 C# 编程语言的基础构件块之前,让我们先看一下 C# 的最小的程序结构,以便作为接下来章节的参考. C# Hello World 实例 一个 C# 程序主要包括以下部分: ...
- 雷林鹏分享:XML 简介
XML 简介 XML 被设计用来传输和存储数据. HTML 被设计用来显示数据. 应该掌握的基础知识 在您继续学习之前,需要对以下知识有基本的了解: HTML JavaScript 如果您希望首先学习 ...
- 雷林鹏分享:XML 用途
XML 用途 XML 应用于 Web 开发的许多方面,常用于简化数据的存储和共享. XML 把数据从 HTML 分离 如果您需要在 HTML 文档中显示动态数据,那么每当数据改变时将花费大量的时间来编 ...
- 雷林鹏分享:XML 语法规则
XML 语法规则 XML 的语法规则很简单,且很有逻辑.这些规则很容易学习,也很容易使用. 所有的 XML 元素都必须有一个关闭标签 在 HTML 中,某些元素不必有一个关闭标签: This is a ...
- 雷林鹏分享:XML 验证器
XML 验证器 使用我们的 XML 验证器来对您的 XML 文件进行语法检查. XML 错误会终止您的程序 XML 文档中的错误会终止您的 XML 应用程序. W3C 的 XML 规范声明:如果 XM ...
- 雷林鹏分享:XML 相关技术
XML 相关技术 下面是一个 XML 技术的列表. XHTML (可扩展 HTML) 更严格更纯净的基于 XML 的 HTML 版本. XML DOM (XML 文档对象模型) 访问和操作 XML 的 ...
- 雷林鹏分享:XML 编辑器
XML 编辑器 如果您希望极认真地学习和使用 XML,那么您一定会从一款专业的 XML 编辑器的使用上受益. XML 是基于文本的 XML 是基于文本的标记语言. 关于 XML 的一件很重要的事情是, ...
- 雷林鹏分享:XML 实例
XML 实例 这些例子演示了 XML 文件.XML 格式化和 XML 转换(XSLT). 还演示了与 XML 一起使用的 JavaScript(AJAX). 查看 XML 文件 查看一个简单的 XML ...
随机推荐
- WIN10安装和使用MySql5.6中遇到的一些问题与解决
WIN10安装和使用MySql5.6中遇到的一些问题与解决 提示一下,安装前需要安装python环境. MySql安装缺少组件MySQL for Excel 如图(转载别人的图,自己的安装时没有截图) ...
- tp剩余未验证内容-2
如何设置一个 "资源" (文件/图片/zip/视频等)在点击时, 自动开始下载? 通常只要在这些地方, 设置 一个链接a, 让href等于这个资源就行了. 这样当点击这个资源时, ...
- Git rebase使用
目录 rebase的优点和缺点 分支内合并多个commit为一个新commit使用: 命令: 使用: 将其他分支合并到主分支,表现为线性: 将其他分支多个commit合并到主分支,并形成一个新comm ...
- 论文笔记之:Optical Flow Estimation using a Spatial Pyramid Network
Optical Flow Estimation using a Spatial Pyramid Network spynet 本文将经典的 spatial-pyramid formulation ...
- webpack用 babel将ES6转译ES5
webpack webpack.config.js配置文件 module.exports = { entry: './es6.js', // 入口文件路径 output: { filename: &q ...
- Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
- 【.Net】结合项目谈谈多线程
提到多线程, 大家都知道, 在进程中启用多个线程进行工作, 会提升程序的效率等等. 本篇文章旨在解释多线程的基础概念之外, 还要结合实际的项目来谈多线程的具体使用. Thread 我们知道启动一个线程 ...
- Latex 三线表及设置列数
参考: latex的三线表格及一些错误的修改 latex 三线表 Latex 三线表 及设置列数 绘制三线表: \begin{table}[htbp] \caption{\label{tab:test ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
- SpringBoot学习(二)
spring-boot-starter-parent Maven的用户可以通过继承spring-boot-starter-parent项目来获得一些合理的默认配置.这个parent提供了以下特性: 默 ...