本文介绍如何使用 JavaScript 的 XMLHttpRequest 对象读取本地 XML 文件，并通过 DOM 解析提取节点数据，最终将内容动态输出到网页指定的 div 元素中。
JavaScript 读取 XML 并输出到 div 的方法
本文详细介绍一种使用 JavaScript 读取 XML 文件内容，并将其显示在网页 div 元素中的实现方法。
首先，需要准备好被读取的 XML 文件，例如 note.xml。
<nooo>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
<note>
<to>a</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
</nooo>
接下来，通过 JavaScript 代码实现将 XML 中的数据提取并渲染到指定的 div 容器中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net js读取xml</title>
<style>
.aaaa{width: 30%;height: 50px;line-height: 50px;text-align: center;border: 1px solid darkblue;float: left;}
</style>
</head>
<body>
<div id="xmlid"></div>
<script>
xmltext = new XMLHttpRequest;
xmltext.open("GET","note.xml",false);
xmltext.send();
a = xmltext.responseXML;
//document.getElementById("xmlid").innerHTML = a.getElementsByTagName("to")[2].childNodes[0].nodeValue;
x = a.getElementsByTagName("note");
for(i=0;i<x.length;i++)
{
document.write("<div class='aaaa'>");
document.write(x[i].getElementsByTagName("to")[0].childNodes[0].nodeValue);
document.write("</div>");
document.write("<div class='aaaa'>");
document.write(x[i].getElementsByTagName("heading")[0].childNodes[0].nodeValue);
document.write("</div>");
document.write("<div class='aaaa'>");
document.write(x[i].getElementsByTagName("body")[0].childNodes[0].nodeValue);
document.write("</div>");
}
</script>
</body>
</html>
执行上述代码后，可以在浏览器中看到预期的运行效果。
此外，为了方便进行 XML 相关操作，以下提供几款常用的在线工具供参考。
在线 XML 与 JSON 互相转换工具： http://tools.jb51.net/code/xmljson
在线格式化 XML 或在线压缩 XML 工具： http://tools.jb51.net/code/xmlformat
XML 在线压缩与格式化工具： http://tools.jb51.net/code/xml_format_compress
XML 代码在线格式化与美化工具： http://tools.jb51.net/code/xmlcodeformat
如需了解更多 JavaScript 相关技术，可查阅本站专题：《JavaScript 操作 XML 文件技巧总结》、《JavaScript 文件与目录操作技巧汇总》、《JavaScript 中 ajax 操作技巧总结》、《JavaScript 错误与调试技巧总结》及《JavaScript 数据结构与算法技巧总结》。
希望本文提供的示例对您的 JavaScript 编程有所帮助。