js DOM 元素ID是全域變數_DOM

標準規範

HTML5規範文檔中指出:如果一個元素符合下面兩條規則中的任一條,則window對像中必須要有與之對應的一個屬性,屬性值就是這個對象.

• 如果一個元素擁有ID屬性,那麼ID屬性的屬性值就會成為window物件的屬性名稱.
• 如果一個元素擁有name屬性,那麼name屬性的屬性值就會成為window物件的屬性名稱.但這個元素的標籤名稱必須是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一個.

讓我們看一個例子.假定存在一個頁面,該頁麵包含了一個ID屬性為“foo”的div元素:

複製程式碼 程式碼如下:

這樣一來,上面的的div元素就可以透過window.foo(和其他的window屬性一樣),或者全域變數foo來存取.例如,在Chrome控制台中,你可以這樣做:

複製程式碼 程式碼如下:

> "foo" in window
true

Firefox
火狐(14)的工作方式略有不同.

複製程式碼 程式碼如下:

> "foo" in window


> "foo" in window
false>false> typeof foo // 這個全域變數到底有木有?
object
//錯誤控制台輸出了下面的警告.//Element referenced by ID/NAME in the global scope.
//Use W3C standard document.getElementById() instead.

> foo
[object HTMLDivElement]
//錯誤控制台輸出了下面的警告.//Element referenced by ID/NAME in the global scope.
//Use W3C standard document.getElementById() instead.> "foo" in window true

> 程式碼如下:

> "foo" in window
false
> typeof foo  // 這個全域變數到底有木有?
object
//錯誤控制台輸出了下面的警告.//Element referenced by ID/NAME in the global scope.
//Use W3C standard document.getElementById() instead.

> foo
[object HTMLDivElement]
//錯誤控制台輸出了下面的警告.//Element referenced by ID/NAME in the global scope.
//Use W3C standard document.getElementById () instead.> "foo" in window true

這到底是怎麼一回事?初始化時,window並沒有屬性foo.但在第一次訪問這個屬性的時候(透過window.foo屬性直接存取或透過全域變數foo來存取都可以),它會自動建立.

譯者註:我在Firefox14,15,18中都沒有發現警告,不過在Firefox12試驗時,的確有警告.

[注意:範例中的程式碼只能在網頁中透過script標籤運作才能見效,不能透過終端運作.這是因為終端在處理全域物件時,使用了不同的方式.]

譯者註:我在Firebug中嘗試例子中的代碼,並沒發現有什麼差別.

一旦你嘗試讀取foo的值,雖然會正常返回那個div元素,但同時錯誤控制台會有警告,告訴你不應該那麼做.很顯然,這樣的警告是正確的:在終端調試的時候,你可以使用這個特性,但在實際的程式碼中,不應該使用.

Cody Lindley寫了一個jsPerf測試來比較透過全域變數存取foo和透過window.foo來存取foo的性能差異.有趣的是,只有在Firefox中訪問window.foo更快點.