正確使用DOM--如何訪問網(wǎng)頁元素

1076026807

最新正確使用DOM--如何訪問網(wǎng)頁元素
以下是三零網(wǎng)為大家整理的最新正確使用DOM--如何訪問網(wǎng)頁元素的文章，希望大家能夠喜歡!
Firefox以及其他Gecko引擎的瀏覽器遇到的最常見的兼容性問題是IE DHTML和W3C DOM的區(qū)別。
不規(guī)范的DHTML腳本中最容易犯的一個錯誤就是使用不規(guī)范的方式來訪問網(wǎng)頁元素。我們曾經(jīng)用spider爬一些國內(nèi)著名門戶網(wǎng)站，單從數(shù)量上看，95%以上的javascript錯誤都來自于此。
常見的訪問網(wǎng)頁元素的不規(guī)范方式有一下幾種:
1. 直接用id或name屬性名訪問網(wǎng)頁元素，例如:
<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. 在網(wǎng)頁種加入相同id的網(wǎng)頁元素。例如：
<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">學(xué)術(shù)活動</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標(biāo)準(zhǔn)中規(guī)定id在網(wǎng)頁中必須是唯一的，如果你要一次訪問一組元素，對于支持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">學(xué)術(shù)活動</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到底有什么區(qū)別，就是因為IE從來沒有幫他們搞清楚過。你感謝IE的“兼容性”么？我不。
3. 使用all屬性，如document.all，來訪問網(wǎng)頁元素。all屬性是一個IE DHTML 專有的屬性，可以通過如下方式來訪問網(wǎng)頁元素：
<HTMLelement>.all.<id或name>
<HTMLelement>.all("<id或name>")
<HTMLelement>.all["<id或name>"]
規(guī)范的做法是使用getElementById或getElementsByName