码迷,mamicode.com
首页 > 其他好文 > 详细

雷林鹏分享:XML 应用程序

时间:2019-03-19 15:02:14      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:i++   网络   eva   unless   添加   用户   需要   javascrip   应用   

  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 应用程序

标签:i++   网络   eva   unless   添加   用户   需要   javascrip   应用   

原文地址:https://www.cnblogs.com/pengpeng1208/p/10558521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!