JavaScript读取并解析XML文件

最新推荐文章于 2026-01-11 03:25:34 发布

原创最新推荐文章于 2026-01-11 03:25:34 发布 · 870 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍了如何使用JavaScript在浏览器环境中读取并解析XML文件。通过创建一个HTML文件并引用XML文件，利用DOM解析器来加载XML内容，并展示了如何遍历和提取XML数据。

首先建立一个index.html文件，放入如下代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>solution_description</title>
</head>

<body>

<h2>功能描述</h2>

<div id="showText">
<textarea cols=120 rows=10 name="content" id="content" style="overflow: auto" readOnly="readOnly"></textarea><br/>
</div>

<script type="text/javascript">
  window.onload= loadText;
  function loadText()
  {
    var xdoc = new ActiveXObject("Microsoft.XMLDOM");
	xdoc.async = "false";
	xdoc.load('Solution_description.xml');
	nodes = xdoc.documentElement.childNodes;
    var abc = document.getElementById("content");
       //解析XML文件内容
	var len = nodes.length;
	for(var i = 0; i < len;i++)
	{
		if(nodes[i].getAttribute('id') == "SW00w23")
	       abc.value = nodes[i].getAttribute('text');
	}
  }
  
  function msg1()
  {
     var cObj = document.getElementById("content");
     cObj.removeAttribute("readOnly");
  }
  
  function msg2()
  {
  var cObj = document.getElementById("content");
      cObj.setAttribute("readOnly",'true');
  }
</script>


<div id="buttons">
<form>
<input type="button" value="修改" onClick="msg1()" />
<input type="button" value="保存" onClick="msg2()" />
</form>
</div>

</body>
</html>

在相同目录下建立一个Solution_description.xml文件

放入如下内容

<?xml version="1.0" encoding="gb2312"?>
<root>
     <item id ="ST01" text = "Ashisgangshenmsyong"> </item>
	 <item id ="SW00153" text = "ADSFASD"> </item>
	 <item id ="SW00w23" text = "DSAF"> </item>
	 <item id ="SW0103" text = "AFAF "> </item>

</root>

即可完成对XML的读及解析功能。