[收藏]使用DOM操作XML文档的简单范例代码

最新推荐文章于 2021-01-02 23:33:46 发布

caiyi0903

最新推荐文章于 2021-01-02 23:33:46 发布

阅读量1.7k

点赞数

分类专栏： J2SE/基础类 Sencha EXTJS/Javascript 文章标签：文档 xml stylesheet microsoft url function

本文链接：https://blog.youkuaiyun.com/caiyi0903/article/details/577522

版权

J2SE/基础类同时被 2 个专栏收录

8 篇文章

订阅专栏

Sencha EXTJS/Javascript

3 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用DOM API加载和处理XML文档，包括创建HTML表格来展示XML数据的过程。示例代码涵盖了跨浏览器兼容性的考虑。

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

　　在数据表示方面，XML文档更加结构化。DOM在支持HTML的基础上提供了一系列的API，支持针对XML的访问和操作。利用这些API，我们可以从XML中提取信息，动态的创建这些信息的HTML呈现文档。处理XML文档，通常遵循“加载XML文档à提取信息à加工信息à创建HTML文档”的过程。下面的例子演示了如何加载并处理XML文档。

　　这个例子包含两个JS函数。loadXML()负责加载XML文档，其中既包含加载XML文档的2级DOM代码，又有实现同样操作的Microsoft专有API代码。需要提醒注意的是，文档加载过程不是瞬间完成的，所以对loadXML()的调用将在加载文档完成之前返回。因此，需要传递给loadXML()一个引用，以便文档加载完成后调用。

　　例子中的另外一个函数makeTable()，则在XML文档加载完毕之后，使用最后前介绍过的DOM应用编程接口读取XML文档信息，并利用这些信息形成一个新的table表格。

　　例子7 -- sample6_1.htm：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
function loadXML(handler) {
	var url = "employees.xml";
	if(document.implementation&&document.implementation.createDocument) {
		var xmldoc = document.implementation.createDocument("", "", null);
		xmldoc.onload =  handler(xmldoc, url);
		xmldoc.load(url);
	}
	else if(window.ActiveXObject) {
		var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
		xmldoc.onreadystatechange = function() {
			if(xmldoc.readyState == 4) handler(xmldoc, url);
		}
		xmldoc.load(url);
	}
}
function makeTable(xmldoc, url) {
	var table = document.createElement("table");
	table.setAttribute("border","1");
	table.setAttribute("width","600");
	table.setAttribute("class","tab-content");
	document.body.appendChild(table);
	var caption = "Employee Data from " + url;
	table.createCaption().appendChild(document.createTextNode(caption));
	var header = table.createTHead();
	var headerrow = header.insertRow(0);
	headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
	headerrow.insertCell(1).appendChild(document.createTextNode("职业"));
	headerrow.insertCell(2).appendChild(document.createTextNode("工资"));
	var employees = xmldoc.getElementsByTagName("employee");
	for(var i=0;i<employees.length;i++) {
		var e = employees[i];
		var name = e.getAttribute("name");
		var job = e.getElementsByTagName("job")[0].firstChild.data;
		var salary = e.getElementsByTagName("salary")[0].firstChild.data;
		var row = table.insertRow(i+1);
		row.insertCell(0).appendChild(document.createTextNode(name));
		row.insertCell(1).appendChild(document.createTextNode(job));
		row.insertCell(2).appendChild(document.createTextNode(salary));
	}
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body onLoad="loadXML(makeTable)">
</body>
</html>

供读取调用的XML文档 – employees.xml：

<?xml version="1.0" encoding="gb2312"?>
<employees>
	<employee name="J.Doe">
		<job>Programmer</job>
		<salary>32768</salary>
	</employee>
	<employee name="A.Baker">
		<job>Sales</job>
		<salary>70000</salary>
	</employee>
	<employee name="Big Cheese">
		<job>CEO</job>
		<salary>100000</salary>
	</employee>
</employees>