zoukankan      html  css  js  c++  java
  • IE 和 FireFox 对 DOM 支持的差异

    1、document.getElementById的差异

    请在 IE 和 FireFox 分别打开 包含以下代码的页面。

    <html>
    <head>
    <script type="text/javascript">
    function getValue()
    {
      var x=document.getElementById("frmTest")
     
      if (x)
        alert(x.innerHTML)
      else
        alert("不能找到frmTest") 
    }
    </script>
    </head>

    <body>
      <FORM onsubmit="return false" method=post name="frmTest">
       <INPUT TYPE="Text" NAME="txtInput" value="123">
      </FORM>
      <BUTTON name= "btnTest" onclick="getValue()">测试</BUTTON>
    </body>
    </html>

    点击“测试”按钮,

      在 IE 中显示的内容是: <INPUT TYPE=Text NAME=txtInput value=123>

      在 FireFox 中显示的内容却是:不能找到frmTest

    实践表明,FireFox 对DOM 的处理比 IE 更严格更严谨(IE默认做了一些特别的转换)。因此为了提高浏览器处理getElementById的兼容性,应该在编写 HTML 时,元素的id 和 name 都应该设置上。

    以上代码,修改成   <FORM onsubmit="return false" method=post name="frmTest" id="frmTest"> ,那么点击“测试”按钮,得到的结果将是我们所期待的。

    代码在IE8, FF4,FF5,测试通过。

    2、IE8 的调试

        对于使用JavaScipt 动态改变元素事件处理函数的,在IE8 调试界面里的HTML树中是无法看见的,如以下代码

    <html>
    <head>
    <script type="text/javascript">
    function getValue()
    {

      var btn=document.getElementById("btnTest")
      if (btn)
      {
        alert(btn.outerHTML)
       
        btn.value = "测试2"
        btn.onclick=function(){GetValue2()}
      }
      else
        alert("不能找到btnTest")
     
    }

    function GetValue2()
    {
      var btn=document.getElementById("btnTest")
      if (btn)
      {
       alert(btn.outerHTML)
      }
       
    }
    </script>
    </head>

    <body>
      <FORM onsubmit="return false" method=post name="frmTest" id="frmTest">
       <INPUT TYPE="Text" NAME="txtInput"  value="123">
      </FORM>
      <BUTTON id= "btnTest" name="btnTest" onclick="getValue()">测试</BUTTON>
    </body>
    </html>

    当点击"测试"按钮,结果显示为  <BUTTON id= btnTest name=btnTest onclick=getValue()>测试</BUTTON>

    当点击"测试2"按钮,结果显示为  <BUTTON id= btnTest name=btnTest>测试2</BUTTON>

    3、outerHTML

       outerHTML不是标准HTML的元素属性,是 IE 自己扩展的, FirefFox 不支持outerHTML。

  • 相关阅读:
    在oschina上新建项目的步骤
    将txt转为DataTable的方法
    设置IIS让网站拥有“网站目录外文件”的读写权限的操作(图文)
    从客户端****中检测到有潜在危险的 Request.QueryString 值在.net mvc下的解决方法
    动态调用类里的方法的示例(wjx)
    Pyhton忽略返回变量方法
    wsl安装Ubuntu16.04+Python2.7
    win10快速调用Shell代替GitBash
    wsl与win10文件互访
    OpenCV报错file too short解决
  • 原文地址:https://www.cnblogs.com/finema/p/2101241.html
Copyright © 2011-2022 走看看