JavaScript解析XML文件

最新推荐文章于 2024-06-19 11:11:40 发布

Benwei666

最新推荐文章于 2024-06-19 11:11:40 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML|CSS|JS

本文链接：https://blog.youkuaiyun.com/benweizhu/article/details/8868209

HTML|CSS|JS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用JavaScript解析XML文件的例子，通过内置XML解析器将XML转换为XMLDOM对象并展示如何读取节点数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前也有一些使用JavaScript解析XML文件的开源库：

https://github.com/Leonidas-from-XIV/node-xml2js

https://github.com/tautologistics/node-htmlparser

https://github.com/ndebeiss/jsXmlSaxParser

但这些库的讲解不是很清楚易懂。

本文中使用的xml解析方法来自于：http://www.w3school.com.cn/xml/xml_parser.asp

原理是：“所有现代浏览器都有读取和操作 XML 的内建 XML 解析器。解析器把 XML 载入内存，然后把它转换为可通过 JavaScript 访问的 XML DOM 对象。”

下面的代码来自：w3school中的例子：

parsexml.html

<html>
<head>
	<title>parsexml</title>
</head>
<body>
	<h1>W3School.com.cn Internal Note</h1>
	<p> <b>To:</b>
		<span id="to"></span>
		<br /> 
		<b>From:</b>
		<span id="from"></span>
		<br />
		<b>Message:</b>
		<span id="message"></span>
	</p>

	<script type="text/javascript">
		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","/expriment/note.xml",false);
		xmlhttp.send();
		xmlDoc=xmlhttp.responseXML;
		document.getElementById("to").innerHTML=
		xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
		document.getElementById("from").innerHTML=
		xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
		document.getElementById("message").innerHTML=
		xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
	</script>
</body>
</html>

node.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!--  Copyright w3school.com.cn -->
<note>
	<to>George</to>
	<from>John</from>
	<heading>Reminder</heading>
	<body>Don't forget the meeting!</body>
</note>

也许你将这个代码拷贝到本地，并修改里面的连接之后，却发现仍旧运行不了。

原因是这里使用了XmlHttpRequest对象，所以这个代码必须运行在服务器下，例如tomcat。

http://www.w3school.com.cn/xml/xml_http.asp，这里有关于XmlHttpRequest对象的讲解。

我这里将该文件放在我的github上面，就成功运行了。地址是:http://benzeph.github.io/expriment/parsexml.html

需要注意

		xmlhttp.open("GET","/expriment/note.xml",false);

open函数中URL地址，是以你服务器的根路径为相对路径的，所以就算note.xml和xmlparse.html在同一个文件夹下，也不能直接用"note.xml"。