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

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

  • 相关阅读:
    avalon随笔
    ms-attr-data-real-gold="{{page_data[0].gold}}" 属性付真
    jQuery 快捷操作
    jQuery 属性操作
    jQuery 表单域选中选择器
    jQuery 层次选择器
    jQuery 基本选择器
    jQuery 基本使用
    jQuery 引入多个库文件冲突
    BOM window对象方法
  • 原文地址:https://www.cnblogs.com/pengpeng1208/p/10558521.html
Copyright © 2011-2022 走看看