Firefox 1.5 中的 XML，第 3 部分：利用 JavaScript 处理 Firefox 中的 XML

最新推荐文章于 2022-09-22 15:54:43 发布

原创最新推荐文章于 2022-09-22 15:54:43 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#firefox #javascript #xml #html #文档 #mozilla

Web开发同时被 2 个专栏收录

156 篇文章

订阅专栏

XML

59 篇文章

订阅专栏

这是 “ Firefox 1.5 中的 XML” 系列中的第三篇文章，您将学习在 Mozilla Firefox 中使用 JavaScript 实现处理 XML。在前两篇文章 Firefox 1.5 中的 XML，第 1 部分：XML 特性概述和 Firefox 1.5 中的 XML，第 2 部分：基本 XML 处理中，我们了解了 Mozilla Firefox 中各种与 XML 相关的工具，以及 XML 解析的基本概念、级联样式表（CSS）和 XSLT 样式表调用。

了解了 XML 在 Firefox 浏览器中的基本显示和样式后，下一个要关注的功能就是脚本。本文中，我将展示利用 JavaScript 代码处理 XML 这一基本概念。本文包含的所有代码示例和屏幕截图都是在 Ubuntu Linux® 系统中使用 Firefox 1.5.0.4 创建和测试的，配置文件没有修改过（即没有扩展，保留了安装时的默认选项）。如果要编写用于 XML 处理的跨浏览器代码，可能必须使用其他的浏览器嗅探技术，但是，我没有在本文介绍这些技术。

加载 XML 文件

您可以使用 Web 页面内嵌的 JavaScript 代码加载 XML 文档。我将从一个 HTML Web 页面示例入手，该页面加载一个简单的 XML 邮件列表格式用于动态更新，要加载的 XML 文档如清单 1 所示（labels.xml）。

清单 1.（labels.xml）地址标签 XML

				<?xml version="1.0" encoding="iso-8859-1"?>
<labels>
  <label id='ep' added="2003-06-10">
    <name>Ezra Pound</name>
    <address>
      <street>45 Usura Place</street>
      <city>Hailey</city>
      <province>ID</province>
    </address>
  </label>
  <label id='tse' added="2003-06-20">
    <name>Thomas Eliot</name>
    <address>
      <street>3 Prufrock Lane</street>
      <city>Stamford</city>
      <province>CT</province>
    </address>
  </label>
  <label id="lh" added="2004-11-01">
    <name>Langston Hughes</name>
    <address>
      <street>10 Bridge Tunnel</street>
      <city>Harlem</city>
      <province>NY</province>
    </address>
  </label>
  <label id="co" added="2004-11-15">
    <name>Christopher Okigbo</name>
    <address>
      <street>7 Heaven's Gate</street>
      <city>Idoto</city>
      <province>Anambra</province>
    </address>
  </label>
</labels>

清单 2 是仅包括一个链接的 HTML 页面，链接显示 “Click here to load addresses”。单击链接，地址标签的信息被添加到页面中。

清单 2. HTML 页面利用 JavaScript 加载 XML 用于动态更新

				<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <title>Address book</title>
    <script type="application/javascript">
var ELEMENT_NODE = 1
//TEXT_NODE

function loadAddresses()
{
  xmlDoc = document.implementation.createDocument("", "", null);
  xmlDoc.onload = writeList;
  xmlDoc.load("labels.xml");
}

function writeList()
{
  var labels = xmlDoc.getElementsByTagName('label');
  var ol = document.createElement('OL');

  for (i=0; i < labels.length; i++)
  {
    var li = document.createElement('LI');
    for (j=0; j < labels[i].childNodes.length; j++)
    {
      if (labels[i].childNodes[j].nodeType != ELEMENT_NODE) continue;
      var cdata = document.createTextNode(
        labels[i].childNodes[j].firstChild.nodeValue);
      li.appendChild(cdata);
    }
    var labelId = document.createTextNode('(' +
      labels[i].getAttribute('id') + ')');
    li.appendChild(labelId);
    ol.appendChild(li);
  }
  document.getElementById('updateTarget').appendChild(ol);
}
    </script>
  </head>
  <body id='updateTarget'>
    <p>
      <a href="javascript:loadAddresses()">Click here to load addresses</a>
    </p>
  </body>
</html>

script 元素体现动态特性，定义一个 JavaScript 函数 loadAddresses，这个函数将被 HTML 中的链接调用。该函数创建一个空文档实例，然后使用 load 函数读入清单 1（labels.xml）。load 函数是异步执行的，因此，在 XML 文档读入的同时，脚本可跳到下一行执行，使您能够在 XML 加载开始后就使用一个触发函数开始运行。因此，我为一个独立的函数 writeList 设置 onload 属性。该函数使用方便的文档对象模型（Document Object Model, DOM）的 getElementsByTagName 方法遍历标签。如果 XML 文档使用名称空间，那么要使用 getElementsByTagNameNS 表单而不是上面的方法，并将名称空间指定为第一个参数。在下一节中，您将会看到一个这样的例子。在清单 2 中，只使用 DOM 的基本层（叫做 DOM Level 1）进行 XML 处理。对于支持名称空间的应用程序，需要使用 DOM Level 2，它扩展了许多 Level 1 方法，可以支持名称空间。清单 2 创建了一个表示有序列表的子树，将 HTML 主文档作为工厂（factory）来创建节点。这样，生成的子树可以插入到 HTML 主文档中。清单 2 使用普通模式读取源 XML 树，然后将相应的节点添加到输出 HTML 子树中。

对每个 label 元素执行循环语句 labels[i].childNodes，查找 name 和 address 子节点。为避免对文本节点的子节点执行操作，使用 nodeType 测试。使用 firstChild.nodeValue 方法进行访问获得 name 元素的子文本。对 address 元素来说，第一个子节点是空格。您不能访问 address 的子节点的任何文本内容。使用 getAttribute 方法可以访问 ID。将收集到的所有文本添加到列表项中。编译完所有的列表项元素之后，使用 appendChild 方法更新包含子树的 HTML 文档。可以使用 updateTarget ID 标记将添加该子树的元素（body）。当第一次在 Firefox 中加载该 HTML 时，只能看到如图 1 所示的链接。