zoukankan      html  css  js  c++  java
  • 雷林鹏分享: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

      (编辑:雷林鹏 来源:网络)

  • 相关阅读:
    ACM-ICPC 2018 徐州赛区网络预赛 D 杜教筛 前缀和
    51 Nod 1244 莫比乌斯函数前n项和
    20170914-构建之法:现代软件工程-阅读笔记
    结对-五子棋游戏-开发环境搭建过程
    结对-五子棋游戏-设计文档
    Git使用方法2.0
    团队-象棋游戏-团队信息
    Web开发技术——JQuery4(隐藏和显示、淡入和淡出、滑动)
    Web开发技术——JQuery3(事件)
    Web开发技术——JQuery2(语法和选择器)
  • 原文地址:https://www.cnblogs.com/pengpeng1208/p/10558521.html
Copyright © 2011-2022 走看看