XML DOM 浏览器差异

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

实例

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

  1. <bookstore>
  2. <book category="children">
  3. <title lang="en">Harry Potter</title>
  4. <author>J K. Rowling</author>
  5. <year>2005</year>
  6. <price>29.99</price>
  7. </book>
  8. <book category="cooking">
  9. <title lang="en">Everyday Italian</title>
  10. <author>Giada De Laurentiis</author>
  11. <year>2005</year>
  12. <price>30.00</price>
  13. </book>
  14. <book category="web" cover="paperback">
  15. <title lang="en">Learning XML</title>
  16. <author>Erik T. Ray</author>
  17. <year>2003</year>
  18. <price>39.95</price>
  19. </book>
  20. <book category="web">
  21. <title lang="en">XQuery Kick Start</title>
  22. <author>James McGovern</author>
  23. <author>Per Bothner</author>
  24. <author>Kurt Cagle</author>
  25. <author>James Linn</author>
  26. <author>Vaidyanathan Nagarajan</author>
  27. <year>2003</year>
  28. <price>49.99</price>
  29. </book>
  30. </bookstore>

函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

显示节点列表的长度

本例显示了一个节点列表的长度。在 IE 和其他浏览器中，结果是不同的。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>
  4. </head>
  5. <body>
  7. <script type="text/javascript">
  8. xmlDoc=loadXMLDoc("/example/xdom/books.xml");
  10. x=xmlDoc.documentElement.childNodes;
  11. document.write("子节点的数目：" + x.length);
  12. </script>
  13. </body>
  14. </html>

忽略节点间的空文本

本例检查节点的 nodeType，且仅处理元素节点。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>
  4. </head>
  5. <body>
  7. <script type="text/javascript">
  8. xmlDoc=loadXMLDoc("/example/xdom/books.xml");
  10. x=xmlDoc.documentElement.childNodes;
  11. for (i=0;i<x.length;i++)
  12. { 
  13. if (x[i].nodeType==1)
  14.   { 
  15.   document.write(x[i].nodeName);
  16.   document.write("<br />");
  17.   } 
  18. }
  19. </script>
  20. </body>
  21. </html>

DOM 解析中的浏览器差异

所有现代浏览器都支持 W3C DOM 规范。

不过，浏览器之间是有差异的。重要的区别有两点：

  • 加载 XML 的方式
  • 处理空白和换行的方式

在 “解析 XML DOM” 这一节，已经解释了加载 XML 的不同方式。

在本节中，我们将讲解处理空白和换行的不同方式。

DOM - 空白和换行

XML 经常在节点之间含有换行或空白字符。这是在使用简单的编辑器（比如记事本）时经常出现的情况。

下面的例子（由记事本编辑）在每行之间含有 CR/LF，在每个子节点之前含有两个空格：

  1. <book>
  2.   <title>Harry Potter</title>
  3.   <author>J K. Rowling</author>
  4.   <year>2005</year>
  5.   <price>29.99</price>
  6. </book>

Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。

下面的代码片段显示 （books.xml 的） 根元素拥有多少个子节点：

  1. xmlDoc=loadXMLDoc("books.xml");
  2.  
  3. x=xmlDoc.documentElement.childNodes;
  4. document.write("Number of child nodes: " + x.length);

例子解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  • 获取根元素的子节点
  • 输出子节点数目

结果取决于所使用的浏览器。Firefox 输出 9，而 IE 输出 4。

忽略节点间的空文本

如需忽略元素节点之间的空文本节点，需要检查节点类型。元素节点的类型是 1：

  1. xmlDoc=loadXMLDoc("books.xml");
  2.  
  3. x=xmlDoc.documentElement.childNodes;
  4.  
  5. for (i=0;i<x.length;i++)
  6. { 
  7. if (x[i].nodeType==1)
  8.   {// only process element nodes 
  9.   document.write(x[i].nodeName);
  10.   document.write("<br />");
  11.   } 
  12. }

例子解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  • 获取根元素的子节点
  • 检查每个子节点的节点类型。如果节点类型是 "1"，则是元素节点