要在浏览器中解析获取XML数据,一般只需经过两个步骤:第一,将XML文档、XML字符串转化成XMLDoc对象。第二,使用JS操作XMLDoc对象。

3.1 将XML文档或XML字符串转化成XMLDoc对象

将XML文档转换成XML对象:

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

将XML字符串转化成XMLDoc对象:

txt="<bookstore><book>";
txt=txt+"<title>Everyday Italian</title>";
txt=txt+"<author>Giada De Laurentiis</author>";
txt=txt+"<year>2005</year>";
txt=txt+"</book></bookstore>";

if (window.DOMParser)
{
      parser=new DOMParser();
      xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async="false";
      xmlDoc.loadXML(txt);
}

3.2 使用JS操作XMLDoc对象(XML DOM操作)

有一个描述CD目录的XML文档,存放在服务器的名称为:cd_catalog.xml,其内容如下:

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
</CATALOG>

之后我们需要在HTML中加载XML文档:

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

之后通过HTML DOM/XML DOM显示XML中的数据:

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 + "<br />Title: " + title + "<br />Year: "+ year;
   document.getElementById("showCD").innerHTML=txt;
} 
  • xmlDoc -由解析器创建的 XML 文档
  • getElementsByTagName("ARTIST")[0] - 第一个 <ARTIST> 元素
  • childNodes[0] - <ARTIST> 元素的第一个子元素(文本节点)
  • nodeValue - 节点的值(文本本身)

下面列出常用的XML DOM操作:

1、获取元素的值

value=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

2、获取属性的值

txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");

3、改变元素的值

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";

4、改变属性的值

x=xmlDoc.getElementsByTagName("book");
for(i=0;i<x.length;i++)
{
  x[i].setAttribute("edition","first");
}

注意:所有获取元素、属性(getElementByTagName())的方法获取到的都是一个数组。

5、创建元素

createElement() 方法创建新的元素节点。

createTextNode() 方法创建新的文本节点。

appendChild() 方法向节点添加子节点(在最后一个子节点之后)。

如需创建带有文本内容的新元素,需要同时创建元素节点和文本节点。

下面的代码创建了一个元素 (<edition>),然后把它添加到第一个 <book> 元素中:

newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext);

x=xmlDoc.getElementsByTagName("book");
x[0].appendChild(newel);

6、删除元素

removeChild() 方法删除指定的节点(或元素)。

下面的代码片段将删除第一个 <book> 元素中的第一个节点:

x=xmlDoc.getElementsByTagName("book")[0];
x.removeChild(x.childNodes[0]);

4.在浏览器中解析XML的更多相关文章

  1. 浏览器中的XML与JavaScript

    浏览器中的XML与JavaScript 在处理XML前,你需要在JavaScript中获取它.这一部分展示了一些不同的方法用来在JavaScript中获取XML并且对它进行处理. XML的节点类型 在 ...

  2. 用 ElementTree 在 Python 中解析 XML

    用 ElementTree 在 Python 中解析 XML 原文: http://eli.thegreenplace.net/2012/03/15/processing-xml-in-python- ...

  3. iOS中解析 XML / JSON

    JSON数据格式 1. 概述: JSON (JavaScript Object Notation) 是⼀一种轻量级的数据交换格式 基于⽂文本格式,易于⼈人阅读和编写,同时也易于机器解析和⽣生成. 2. ...

  4. [置顶] Android学习系列-Android中解析xml(7)

    Android学习系列-Android中解析xml(7) 一,概述 1,一个是DOM,它是生成一个树,有了树以后你搜索.查找都可以做. 2,另一种是基于流的,就是解析器从头到尾解析一遍xml文件.   ...

  5. Delphi中解析Xml的控件-SimDesign NativeXml

    Delphi中解析Xml的控件-SimDesign NativeXml 正在学习,感觉应用很方便.无源代码的版本还是免费的. SimDesign.NativeXml是一个delphi和bcb的XML控 ...

  6. Android中解析XML格式数据的方法

    XML介绍:Extensible Markup Language,即可扩展标记语言 一.概述 Android中解析XML格式数据大致有三种方法: SAX DOM PULL 二.详解 2.1 SAX S ...

  7. spring中解析xml

    解析xml有SAX,Stax,dom等方式,那么spring中是如何解析xml文件的呢? Document doc = this.documentLoader.loadDocument( inputS ...

  8. Java中解析XML的四种方法

    XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM ...

  9. java 中解析xml的技术

    最初,XML 语言仅仅是意图用来作为 HTML 语言的替代品而出现的,但是随着该语言的不断发展和完善,人们越来越发现它所具有的优点:例如标记语言可扩展,严格的语法规定,可使用有意义的标记,内容存储和表 ...

随机推荐

  1. 20130620—ant和java杂学随笔

    ant知识点: 1.使用属性定义相对路径的时候,一定要使用location,而不要去使用value  对于<property></property>中location和valu ...

  2. java 构造器学习笔记

    构造器(构造器不是方法也不是类的成员) 以前创建对象的方式, public class Constructor{ public static void main(String[] args){ per ...

  3. iOS runtime的应用实例

      一直想弄明白runtime是怎么回事,因为面试的时候这是一道必备问题,但是平时用的机会真的少之又少,我一度以为runtime只是用来装13的利器,没什么卵用.但是随着学习的增多,发现runtime ...

  4. samba服务搭建

    文件传输 smb主配置文件 /etc/samba/smb.conf? yum install samba samba-client 要启动smb和nmb服务 修改安全级别 security = sha ...

  5. 什么是Git?

    其实我在写这篇随笔的时候连Git是什么都不知道,只是听说过,也注册了一个GitHub的账号,但并不会玩. 我也是查看了半天的网页才明白一个大概,但我觉得以后肯定会经常用到它. 简单的来说, Git 是 ...

  6. 每天一个linux命令(41)--ping命令

    Linux系统的 ping 命令是常用的网络命令,它通常用来测试与目标主机的连通性,它通过发送 ICMP ECHO_REQUEST数据包到网络主机(send  ICMP  ECHO_REQUEST t ...

  7. 每天一个linux命令(26)--用SecureCRT来上传和下载文件

    用SSH管理Linux 服务器时经常需要远程与本地之间交互文件,而直接使用 SecureCRT 自带的上传下载功能无疑是最方便的,SecureCRT下的文件传输协议有ASCII.Xmodem.Zmod ...

  8. js设置当前页面始终为框架最顶层

    使用iframe做的页面,当session失效时,登录页面会显示在iframe里面 解决办法判断登录页面是否为顶层页面,不是的话刷新顶层页面

  9. 3433: [Usaco2014 Jan]Recording the Moolympics

    3433: [Usaco2014 Jan]Recording the Moolympics Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 137  S ...

  10. python 机器学习 K-近邻算法

    本人想边写文章,边学习,用的是 网上最火的<机器学习实战>machine learning in action 来做一次实践. 希望在过程中理顺思路之余,也有分享自己的一些理解,学习.加油 ...