zoukankan      html  css  js  c++  java
  • XMLDOM之浏览器差异

    DOM解析中的浏览器差异

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

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

    1、加载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 字符串:

    <html>
    <body>
    <script type="text/javascript">
    text="<bookstore>"
    text=text+"<book>";
    text=text+"<title>Harry Potter</title>";
    text=text+"<author>J K. Rowling</author>";
    text=text+"<year>2005</year>";
    text=text+"</book>";
    text=text+"</bookstore>";
    
    try //Internet Explorer
      {
      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async="false";
      xmlDoc.loadXML(text);
      }
    catch(e)
      {
      try //Firefox, Mozilla, Opera, etc.
        {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(text,"text/xml");
        }
      catch(e) {alert(e.message)}
      }
    document.write("xmlDoc is loaded, ready for use");
    </script>
    </body>
    </html>
    

    注释: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 文件中:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
    </head>
    <body>
    
    <script  type ="text/javascript">
    function loadxmldom(xmlpath)
    {
    try //Internet Explorer
      {
      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     
      }
    catch(e)
      {
      try //Firefox, Mozilla, Opera, etc.
        {
        xmlDoc=document.implementation.createDocument("","",null);
     
        }
      catch(e) {alert(e.message)}
      }
      try 
      {
      xmlDoc.async=false;
      xmlDoc.load(xmlpath);
      return xmlDoc;
      }
      catch(e)
      {
       return null;
      }
    }
    </script>
    <script  type ="text/javascript" >
    var mydom=loadxmldom("bookstore.xml");
      document.write("xmlDoc is loaded, ready for use");
     document.write(mydom.documentElement.childNodes.length);
    </script>
    </body>
    </html>
    

    Error: Access Across Domains

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

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

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

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

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

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

    <book>
      <title>Harry Potter</title>
      <author>J K. Rowling</author>
      <year>2005</year>
      <price>29.99</price>
    </book>
    

    下面的代码片段显示 (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 中,都可以得到相同的结果。

    更多内容

  • 相关阅读:
    antd按需加载
    解决vscode开发react项目没有代码提示问题
    在react中配置less
    flutter之fluro导航传参数
    Flutter游戏:简单规则与结束页
    zsh: command not found:XXX
    React的安装与使用
    git stash 用法总结和注意点
    【OSS】工具类
    ajax将数组或list集合传到后台 的 【坑】
  • 原文地址:https://www.cnblogs.com/LittleFeiHu/p/1902428.html
Copyright © 2011-2022 走看看