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。