XML DOM:浏览器差异

不同的浏览器在 XML DOM 中处理空文本节点的方式是不同的。

实例

下面的例子使用 XML 文件 books.xml

函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。显示节点列表的长度本例显示了一个节点列表的长度。在 IE 和其他浏览器中,结果是不同的。忽略节点间的空文本本例检查节点的 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。

<html>
<head>
<script type="text/javascript" src="/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>

忽略节点间的空文本

如需忽略元素节点之间的空文本节点,需要检查节点类型。元素节点的类型是 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(简单) 或者 TIY(完整)

<html>
<head>
<script type="text/javascript" src="/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>

作者:terry,如若转载,请注明出处:https://www.web176.com/xmldom/10844.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2023年2月28日
下一篇 2023年2月28日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注