Firefox以及其他Gecko引擎的浏覽器遇到的最常見的兼容性問題是IE DHtml和W3C DOM的區別。
不規范的DHtml腳本中最容易犯的一個錯誤就是使用不規范的方式來訪問網頁元素。我們曾經用spider爬一些國內著名門戶網站,單從數量上看,95%以上的Javascript錯誤都來自於此。
常見的訪問網頁元素的不規范方式有一下幾種:
1. 直接用id或name屬性名訪問網頁元素,例如:
<div id="icefable1">...</div>
<script language="Javascript">
icefable1.style.width=0;
</script>
正確的做法是使用getElementById來得到某個有id屬性的元素,用getElementsByName來得到某些有name屬性的元素。例如上面的代碼可以改成:
<div id="icefable1">...</div>
<script language="Javascript">
document.getElementById("icefable1").style.width=0;
</script>
2. 在網頁種加入相同id的網頁元素。例如:
<td width="33%" class=tab-on id=navcell onmouSEOver=switchCell(0)><div align="center">重要提示</div></td>
<td width="33%" class=tab-off id=navcell onmouSEOver=switchCell(1)><div align="center">學術活動</div></td>
<td width="34%" class=tab-off id=navcell onmouSEOver=switchCell(2)><div align="center">交大熱點</div></td>
...
<script language="Javascript">
...
navcell[n].className="tab-on";
...
</script>
Html標准中規定id在網頁中必須是唯一的,如果你要一次訪問一組元素,對於支持name屬性的元素,你可以使用name屬性,name可以是不唯一的。上面的例子可以改為:
<td width="33%" class=tab-on id="navcell1" onmouSEOver=switchCell(0)><div align="center">重要提示</div></td>
<td width="33%" class=tab-off id="navcell2" onmouSEOver=switchCell(1)><div align="center">學術活動</div></td>
<td width="34%" class=tab-off id="navcell3" onmouSEOver=switchCell(2)><div align="center">交大熱點</div></td>
...
<script language="Javascript">
...
eval('document.getElementById("navcell'+n+'").className="tab-on"');
...
</script>
有人寫了快一輩子DHtml了還搞不清楚id和name到底有什麼區別,就是因為IE從來沒有幫他們搞清楚過。你感謝IE的“兼容性”麼?我不。
3. 使用all屬性,如document.all,來訪問網頁元素。all屬性是一個IE DHtml 專有的屬性,可以通過如下方式來訪問網頁元素:
<Htmlelement>.all.<id或name>
<Htmlelement>.all("<id或name>")
<Htmlelement>.all["<id或name>"]
規范的做法是使用getElementById或getElementsByName。