XML DOM 浏览器差异
XML DOM 浏览器差异
不同的浏览器在 XML DOM 中处理空文本节点的方式是不同的。
实例
下面的例子使用 XML 文件 books.xml。
函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。
完整实例【显示节点列表的长度】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.documentElement.childNodes;
document.write("子节点的数目：" + x.length);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例显示了一个节点列表的长度。在 IE 和其他浏览器中，结果是不同的。
完整实例【忽略节点间的空文本】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)
{
if (x[i].nodeType==1)
{
document.write(x[i].nodeName);
document.write("<br />");
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例检查节点的 nodeType，且仅处理元素节点。
DOM 解析中的浏览器差异
所有现代浏览器都支持 W3C DOM 规范。
不过，浏览器之间是有差异的。重要的区别有两点：
- 加载 XML 的方式
- 处理空白和换行的方式
在 “解析 XML DOM” 这一节，已经解释了加载 XML 的不同方式。
在本节中，我们将讲解处理空白和换行的不同方式。
DOM - 空白和换行
XML 经常在节点之间含有换行或空白字符。这是在使用简单的编辑器（比如记事本）时经常出现的情况。
下面的例子（由记事本编辑）在每行之间含有 CR/LF，在每个子节点之前含有两个空格：
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。
下面的代码片段显示 （books.xml 的） 根元素拥有多少个子节点：
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.documentElement.childNodes;
document.write("Number of child nodes: " + x.length);
例子解释：
- 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
- 获取根元素的子节点
- 输出子节点数目
结果取决于所使用的浏览器。Firefox 输出 9，而 IE 输出 4。
完整实例【TIY】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.documentElement.childNodes;
document.write("子节点的数目：" + x.length);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
忽略节点间的空文本
如需忽略元素节点之间的空文本节点，需要检查节点类型。元素节点的类型是 1：
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)
{
if (x[i].nodeType==1)
{// only process element nodes
document.write(x[i].nodeName);
document.write("<br />");
}
}
例子解释：
- 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
- 获取根元素的子节点
- 检查每个子节点的节点类型。如果节点类型是 "1"，则是元素节点
完整实例【TIY（简单）】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)
{
if (x[i].nodeType==1)
{
document.write(x[i].nodeName);
document.write("<br />");
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
或者完整实例【TIY（完整）】：
<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)
{
if (x[i].nodeType==1)
{
document.write(x[i].nodeName);
document.write("<br />");
y=x[i].childNodes;
for (j=0;j<y.length;j++)
{
if (y[j].nodeType==1)
{
document.write(y[j].nodeName);
document.write(": ");
document.write(y[j].childNodes[0].nodeValue);
document.write("<br />");
}
}
document.write("<br />");
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
