js DOM 元素ID就是全局變量

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

有人在twitter上提到了:在Chrome的JavaScript終端中,你只需要輸入一個(gè)元素的ID,就可以訪問(wèn)到這個(gè)元素.@johnjbarton給了解釋,這是因?yàn)樗械脑豂D都是全局變量.本文再詳細(xì)解釋一下

標(biāo)準(zhǔn)規(guī)范

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

如果一個(gè)元素?fù)碛蠭D屬性,那么ID屬性的屬性值就會(huì)成為window對(duì)象的屬性名.
如果一個(gè)元素?fù)碛衝ame屬性,那么name屬性的屬性值就會(huì)成為window對(duì)象的屬性名.但這個(gè)元素的標(biāo)簽名必須是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一個(gè).

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

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

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

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

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

Firefox

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

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

 
> "foo" in window 
false 
> typeof foo // 這個(gè)全局變量到底有木有? 
object 
//錯(cuò)誤控制臺(tái)輸出了下面的警告.//Element referenced by ID/NAME in the global scope. 
//Use W3C standard document.getElementById() instead. 

> foo 
[object HTMLDivElement] 
//錯(cuò)誤控制臺(tái)輸出了下面的警告.//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 // 這個(gè)全局變量到底有木有?
object
//錯(cuò)誤控制臺(tái)輸出了下面的警告.//Element referenced by ID/NAME in the global scope.
//Use W3C standard document.getElementById() instead.

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

這到底是怎么一回事?初始化時(shí),window并沒(méi)有屬性foo.但在第一次訪問(wèn)這個(gè)屬性的時(shí)候(通過(guò)window.foo屬性直接訪問(wèn)或者通過(guò)全局變量foo來(lái)訪問(wèn)都可以),它會(huì)被自動(dòng)建立.

譯者注:我在Firefox14,15,18中都沒(méi)有發(fā)現(xiàn)警告,不過(guò)在Firefox12試驗(yàn)時(shí),的確有警告.

[注意:例子中的代碼只能在網(wǎng)頁(yè)中通過(guò)script標(biāo)簽運(yùn)行才能見(jiàn)效,不能通過(guò)終端運(yùn)行.這是因?yàn)榻K端在處理全局對(duì)象時(shí),使用了不同的方式.]

譯者注:我在Firebug中嘗試?yán)又械拇a,并沒(méi)發(fā)現(xiàn)有什么差別.

一旦你嘗試讀取foo的值,雖然會(huì)正常返回那個(gè)div元素,但同時(shí)錯(cuò)誤控制臺(tái)會(huì)有警告,告訴你不應(yīng)該那么做.很顯然,這樣的警告是正確的:在終端調(diào)試的時(shí)候,你可以使用這個(gè)特性,但在實(shí)際的代碼中,不應(yīng)該使用.

Cody Lindley寫(xiě)了一個(gè)jsPerf測(cè)試來(lái)比較通過(guò)全局變量訪問(wèn)foo和通過(guò)window.foo來(lái)訪問(wèn)foo的性能差別.有趣的是,只有在Firefox中訪問(wèn)window.foo更快點(diǎn).

您可能感興趣的文章: