XML DOM中初学遇到的问题

最新推荐文章于 2024-07-07 09:49:05 发布

原创最新推荐文章于 2024-07-07 09:49:05 发布 · 145 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种解决XML文本中空格问题的方法，通过使用replace()函数清除多余空格，确保了XML节点的正确解析。同时，展示了如何利用JavaScript和HTML将解析后的XML数据展示为表格，包括处理不同浏览器兼容性的策略。

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

问题一会出现xmltxt的空格问题，后续会影响到节点的取值。简而言之，就是你后面空格会被当成节点。
**解决办法：使用replace()**解决办法：使用replace()删除空格和回车

xmltxt=xmltxt.replace(/\n\s*/g,"")

2.在table中的border=‘1’可以直接解决td的border问题

document.getElementById('outdiv').innerHTML = "<table id='mytable' border='1'><tr><th>p.name</th><th>p.species</th><th>p.gender</th><th>p.birth</th><th>o.name</th><th>o.gender</th><th>o.birth</th></tr></table>"

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Assignment1.2-VS107109019</title>
<script>
	function parseBtn() {
		var xmltxt = document.getElementById('xmltext').value
		xmltxt=xmltxt.replace(/\n\s*/g,"")
		try //Internet Explorer
		{
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async = "false";
			xmlDoc.loadXML(xmltxt);
		} catch (e) {
			try //Firefox, Mozilla, Opera, etc.
			{
				var errid;
				parser = new DOMParser();
				xmlDoc = parser.parseFromString(xmltxt, "text/xml");
				document.getElementById('outdiv').innerHTML = "<table id='mytable' border='1'><tr><th>p.name</th><th>p.species</th><th>p.gender</th><th>p.birth</th><th>o.name</th><th>o.gender</th><th>o.birth</th></tr></table>"
				x = xmlDoc.getElementsByTagName("pet")
				for (i = 0; i < x.length; i++) {
					var row = mytable.insertRow(-1);
					row.insertCell(0).innerHTML = x[i].childNodes[0].innerHTML;//p.name
					row.insertCell(1).innerHTML = x[i].attributes[0].nodeValue;//p.species
					row.insertCell(2).innerHTML = x[i].attributes[1].nodeValue;//p.gender
					row.insertCell(3).innerHTML = x[i].childNodes[1].innerHTML;//p.birth
					row.insertCell(4).innerHTML = x[i].childNodes[2].childNodes[0].innerHTML;//o.name
					row.insertCell(5).innerHTML = x[i].childNodes[2].attributes[0].nodeValue;//o.gender
					row.insertCell(6).innerHTML = x[i].childNodes[2].childNodes[0].innerHTML;//o.birth
				}
			} catch (e) {
				alert(e.message)
				mytable.deleteRow(-1)
			}
		}
	}
</script>
</head>
<body>
	<textarea rows="50" cols="60" id="xmltext"><?xml version="1.0" encoding="UTF-8"?>
<pets>
	<pet species="cat" gender="M">
		<name>Moo</name>
		<birth>2016-05-29</birth>
		<owner gender="F">
			<name>Fannie</name>
			<birth>1984-09-30</birth>
		</owner>
	</pet>
	<pet species="cat" gender="F">
		<name>Mini</name>
		<birth>2016-10-10</birth>
		<owner gender="M">
			<name>Alec</name>
			<birth>1985-06-23</birth>
		</owner>
	</pet>
	<pet species="dog" gender="F">
		<name>Stella</name>
		<birth>2014-08-01</birth>
		<owner gender="F">
			<name>Fannie</name>
			<birth>1984-09-30</birth>
		</owner>
	</pet>
</pets>
</textarea>
	<button onclick="parseBtn()">Parse XML String</button>
	<div id="outdiv"></div>
</body>
</html>