標(biāo)準(zhǔn)參考

無。

問題描述

各瀏覽器使用 document.id 和 document.name 方法獲取對象引用的支持存在差異。

造成的影響

某些瀏覽器中通過 document.id 和 document.name 可能無法獲取元素，導(dǎo)致腳本異常，功能不可用。

受影響的瀏覽器

問題分析

參考 W3C 規(guī)范中 HTML5 草案：3.1.1 Documents in the DOM

參考 W3C 規(guī)范中 HTML5 草案：3.1.4 DOM tree accessors

1. DOM 樹的訪問

1.1. DOM 樹中的 Document 對象及 HTMLDocument 接口

瀏覽器中每一個(gè) XML 和 HTML 文檔都用一個(gè) Document 對象來表示。

Document 繼承了 HTMLDocument 接口。

HTMLDocument 接口定義了實(shí)現(xiàn)它的對象所擁有的方法和屬性。其中包括資源元數(shù)據(jù)管理、DOM 樹的訪問、動(dòng)態(tài)標(biāo)記插入、用戶交互和事件處理屬性等。

1.2. 訪問 DOM 樹中節(jié)點(diǎn)的方法

W3C 在 HTML5 草案中規(guī)定了一系列 DOM 樹節(jié)點(diǎn)的訪問方式，并不包括 document.id 或 document.name。

訪問 DOM 樹中某個(gè)節(jié)點(diǎn)的方法，W3C 中推薦的是使用 document.getElementById(id)，根據(jù)一個(gè)元素的 id 屬性獲取它的 DOM 節(jié)點(diǎn)對象。

還有很多其他的方式，也可以獲取頁面上的元素，但這些方式不是 W3C 標(biāo)準(zhǔn)中規(guī)定的，所以對這些方法的支持因?yàn)g覽器而異。這其中，就有使用 document.id 或 document.name 獲取元素的方式。

2. 使用document.id 和 document.name 訪問 DOM 樹中的節(jié)點(diǎn)

使用 document.id 和 document.name 訪問 DOM 樹中節(jié)點(diǎn)的方法，可以訪問 IMG 元素、IFRAME 元素和 FORM 元素。

除了 Opera IE 同時(shí)支持用 document.id 和 document.name 訪問這 3 種元素的節(jié)點(diǎn)對象外，而其它瀏覽器對用其 name 和 id 的支持有所不同。

分析以下代碼：

<script>
    window.onload = function(){
        document.getElementById("info").innerHTML = "document.id :" + !!document.iframe_id+
                                                    "<br/>document.name : " + !!document.iframe_name;
    }
</script>
<iframe id="iframe_id" name="iframe_name"></iframe>
<div id="info"></div>

• 以上測試用例中使用 document.id 和 document.name 的方法獲取 DOM 樹中的 IFRAME 元素引用，如果存在則返回 true，否則返回 false 。

• 獲取元素后的返回值將輸出到 info 中

上面測試用例中，IE Opera 均全返回 true，F(xiàn)irefox 返回 false，而 Safari Chrome 中 document.id 是 false，document.name 是 true。

用其他元素替換 IFRAME 元素，可以測試其它元素的情況。 如下表：

說明：

• 此匯總表中 Q 代表 Quirks Mode，S 代表 Standards Mode；

• 以 document.element_id、document.element_name 表示獲取方式，如 document.div_id 表示利用 id 屬性獲取 DIV 元素對象，而 document.span_name 表示使用 SPAN 元素的 name 屬性來獲取它的對象。

解決方案

使用 W3C 標(biāo)準(zhǔn)中的 document.getElementById(id) 方法獲取對象。

參見

知識(shí)庫

• ...

相關(guān)問題

• ...