首页 »Javascript教程 » javascript处理xml:利用 JavaScript 处理 Firefox 中的 XML »正文javascript处理xml:利用 JavaScript 处理 Firefox 中的 XML来源: 发布时间:星期五, 2008年12月19日 浏览:2次 评论:0
这是 “Firefox 1.5 中  XML” 系列中第 3篇文章 您将学习在 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; char  =iso-8859-1" http-equiv="Content-Type"> <title>Address book</title> <script type="application/javascript">var ELEMENT_NODE = 1//TEXT_NODEfunction 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) {  (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> <aloadAddresses">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)
0
相关文章
读者评论
发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
