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 应用程序的更多相关文章

  1. 雷林鹏分享: XML CDATA

    XML CDATA XML 文档中的所有文本均会被解析器解析. 只有 CDATA 区段中的文本会被解析器忽略. PCDATA - 被解析的字符数据 XML 解析器通常会解析 XML 文档中所有的文本. ...

  2. 雷林鹏分享:C# 程序结构

    C# 程序结构 在我们学习 C# 编程语言的基础构件块之前,让我们先看一下 C# 的最小的程序结构,以便作为接下来章节的参考. C# Hello World 实例 一个 C# 程序主要包括以下部分: ...

  3. 雷林鹏分享:XML 简介

    XML 简介 XML 被设计用来传输和存储数据. HTML 被设计用来显示数据. 应该掌握的基础知识 在您继续学习之前,需要对以下知识有基本的了解: HTML JavaScript 如果您希望首先学习 ...

  4. 雷林鹏分享:XML 用途

    XML 用途 XML 应用于 Web 开发的许多方面,常用于简化数据的存储和共享. XML 把数据从 HTML 分离 如果您需要在 HTML 文档中显示动态数据,那么每当数据改变时将花费大量的时间来编 ...

  5. 雷林鹏分享:XML 语法规则

    XML 语法规则 XML 的语法规则很简单,且很有逻辑.这些规则很容易学习,也很容易使用. 所有的 XML 元素都必须有一个关闭标签 在 HTML 中,某些元素不必有一个关闭标签: This is a ...

  6. 雷林鹏分享:XML 验证器

    XML 验证器 使用我们的 XML 验证器来对您的 XML 文件进行语法检查. XML 错误会终止您的程序 XML 文档中的错误会终止您的 XML 应用程序. W3C 的 XML 规范声明:如果 XM ...

  7. 雷林鹏分享:XML 相关技术

    XML 相关技术 下面是一个 XML 技术的列表. XHTML (可扩展 HTML) 更严格更纯净的基于 XML 的 HTML 版本. XML DOM (XML 文档对象模型) 访问和操作 XML 的 ...

  8. 雷林鹏分享:XML 编辑器

    XML 编辑器 如果您希望极认真地学习和使用 XML,那么您一定会从一款专业的 XML 编辑器的使用上受益. XML 是基于文本的 XML 是基于文本的标记语言. 关于 XML 的一件很重要的事情是, ...

  9. 雷林鹏分享:XML 实例

    XML 实例 这些例子演示了 XML 文件.XML 格式化和 XML 转换(XSLT). 还演示了与 XML 一起使用的 JavaScript(AJAX). 查看 XML 文件 查看一个简单的 XML ...

随机推荐

  1. WIN10安装和使用MySql5.6中遇到的一些问题与解决

    WIN10安装和使用MySql5.6中遇到的一些问题与解决 提示一下,安装前需要安装python环境. MySql安装缺少组件MySQL for Excel 如图(转载别人的图,自己的安装时没有截图) ...

  2. tp剩余未验证内容-2

    如何设置一个 "资源" (文件/图片/zip/视频等)在点击时, 自动开始下载? 通常只要在这些地方, 设置 一个链接a, 让href等于这个资源就行了. 这样当点击这个资源时, ...

  3. Git rebase使用

    目录 rebase的优点和缺点 分支内合并多个commit为一个新commit使用: 命令: 使用: 将其他分支合并到主分支,表现为线性: 将其他分支多个commit合并到主分支,并形成一个新comm ...

  4. 论文笔记之:Optical Flow Estimation using a Spatial Pyramid Network

    Optical Flow Estimation using a Spatial Pyramid Network   spynet  本文将经典的 spatial-pyramid formulation ...

  5. webpack用 babel将ES6转译ES5

    webpack webpack.config.js配置文件 module.exports = { entry: './es6.js', // 入口文件路径 output: { filename: &q ...

  6. Vue.directive自定义指令

    Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...

  7. 【.Net】结合项目谈谈多线程

    提到多线程, 大家都知道, 在进程中启用多个线程进行工作, 会提升程序的效率等等. 本篇文章旨在解释多线程的基础概念之外, 还要结合实际的项目来谈多线程的具体使用. Thread 我们知道启动一个线程 ...

  8. Latex 三线表及设置列数

    参考: latex的三线表格及一些错误的修改 latex 三线表 Latex 三线表 及设置列数 绘制三线表: \begin{table}[htbp] \caption{\label{tab:test ...

  9. JS 事件绑定、事件监听、事件委托详细介绍

    原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...

  10. SpringBoot学习(二)

    spring-boot-starter-parent Maven的用户可以通过继承spring-boot-starter-parent项目来获得一些合理的默认配置.这个parent提供了以下特性: 默 ...