Javascript在IE和Firefox中的差异列表

早上8:35，又是匆匆忙忙地从家里赶出来，开始竞走到车站。5分钟，嗯，比昨天还快了一点，天上开始飘起小雪。等到了站下车后，已经变成了大的雪片在空中慢慢地落下来，那情景，似乎像满天的蒲公英在没有一丝风追赶地缓缓地降落。

呵呵，好了，言归正传。这篇文章的本意是作为一个记录，把我平时遇到IE和Firefox中Javascript的差异记下来。现在就开始第一条吧。

1. 当一个对象为不可见时，在IE中是不可以设置它集中焦点的，但是在Firefox里可以。例如：

<div id="divBlock" style="display:none;"><input type="text" id="txtInput" /></div>
<script language="javascript">
    document.getElementById("txtInput").focus();
</script>

这段代码在IE中就会报错，而在Firefox里面可以正确运行。

2. 向表(Table)追加行：
在FF、Safari、Opera等浏览器中，用document.createElement创建行后用document.appendChild将行直接添加到表上。但是在IE里不可以，而且没有任何错误提示，这时候，需要为表添加表体(tbody)，然后将新创建的行添加到表体(tbody)，代码如下：

<table id="table1">
<tbody id="tbody1">
</tbody>
</table>

var newrow = document.createElement("tr");
document.getElementById("tbody1").appendChild(newrow);

后一种方法适用于各种浏览器。

3. childNodes的不同：

 

<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div2"></div>
</div>

<script type="text/javascript" language="javascript">...
alert(document.getElementById("container").childNodes.length);
</script>

 

上述代码执行后在Firefox里会弹出7，IE中则是3。这是因为Firefox把回车后的空白当作文本节点，此处有4次回车，所以多了四个文本节点。

OS: Windows XP SP2
IE 7.0
Firefox 2.0

4. innerText是IE专有的方法，textContent是Firefox专有的，innerHTML则两者都兼容。

<script type="text/javascript" language="javascript">...
       var ea = document.createElement("A");
       ea.innerText = "导航1";    // IE专有
       ea.textContent = "导航1"; // Firefox专有
       ea.innerHTML = "导航1"   // IE和Firefox兼容
</script>