XMLDOM之浏览器差异

DOM解析中的浏览器差异

所有现代浏览器都支持w3c DOM规范，不过浏览器之间是有差异的，重要的区别有两点：

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

１、加载XML的方式：

所有现代浏览器都内建了用于读取和操作 XML 的 XML 解析器。解析器把 XML 读入内存，并把它转换为可被 JavaScript 访问的 XML DOM 对象；微软的 XML 解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对 XML 文件和 XML 字符串（文本）的加载，而其他浏览器使用单独的解析器。不过，所有的解析器都含有遍历 XML 树、访问、插入及删除节点的函数。

通过微软的 XML 解析器加载 XML

微软的 XML 解析器内建于 Internet Explorer 5 及更高版本中。

下面的 JavaScript 片段把 XML 文档 ("books.xml") 载入了解析器：

 

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("books.xml");

 

代码解释：

• 第一行创建空的微软 XML 文档对象
• 第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本
• 第三行告知解析器加载名为 "books.xml" 的文档

下面的代码加载并解析了一个 XML 字符串：

 

注释：loadXML() 方法用于加载字符串（文本），而 load() 用于加载文件。

 

在 Firefox 及其他浏览器中的 XML 解析器

下面的 JavaScript 片段把 XML 文档 ("books.xml") 载入了解析器：

 

xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("books.xml");

 

代码解释：

• 第一行创建空的 XML 文档对象
• 第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本
• 第三行告知解析器加载名为 "books.xml" 的文档

下面的 JavaScript 片段把名为 txt 的字符串载入解析器中：

 

parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");

代码解释：

• 第一行创建一个空的 XML 文档对象
• 第二行告知解析器加载名为 txt 的字符串

注释：Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象。

为了避免因加载文档而重复编写代码，可以把代码存储在一个单独的 JavaScript 文件中：

 

 

Error: Access Across Domains

出于安全方面的原因，现代的浏览器不允许跨域的访问。

这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。

W3School 的实例所打开的 XML 文件位于 W3School 的域上。

假如你打算在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。

2、处理空白和换行的方式差异：

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

 

  
  J K. Rowling
  2005
  29.99

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

 

 

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.documentElement.childNodes;
document.write("Number of child nodes: " + x.length);

结果取决于所使用的浏览器。Firefox 输出 9（多出来一个换行和四个空白节点），而 IE 输出 4

 

忽略节点间的空文本

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

避免空的文本节点

Firefox，以及其他一些浏览器，把空的空白或换行当作文本节点，而 IE 不会这么做。

这会在使用下列属性使产生一个问题：firstChild、lastChild、nextSibling、previousSibling。

为了避免定位到空的文本节点（元素节点之间的空格和换行符号），我们使用一个函数来检查节点的类型：

 

function get_nextSibling(n)
{
y=n.nextSibling;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}

有了上面的函数，我们就可以使用 get_nextSibling(node) 来代替 node.nextSibling 属性。

 

代码解释：

元素节点的类型是 1。如果同级节点不是元素节点，就移动到下一个节点，直到找到元素节点为止。通过这个办法，在 IE 和 Firefox 中，都可以得到相同的结果。

 

更多内容

转载于:https://www.cnblogs.com/LittleFeiHu/archive/2010/12/10/1902428.html