js DOM 元素ID就是全局變量

更新時間：2012年09月20日 23:36:14 作者：

有人在twitter上提到了:在Chrome的JavaScript終端中,你只需要輸入一個元素的ID,就可以訪問到這個元素.@johnjbarton給了解釋,這是因為所有的元素ID都是全局變量.本文再詳細解釋一下

標準規(guī)范

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

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

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

復(fù)制代碼代碼如下:

這樣一來,上面的的div元素就可以通過window.foo(和其他的window屬性一樣),或者全局變量foo來訪問到.比如,在Chrome控制臺中,你可以這樣做:

復(fù)制代碼代碼如下:

 
> "foo" in window 
true 
> foo 
<div id="foo"></div> 

Firefox

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

復(fù)制代碼代碼如下:

 
> "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 

復(fù)制代碼代碼如下:

> "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中都沒有發(fā)現(xiàn)警告,不過在Firefox12試驗時,的確有警告.