js DOM 元素ID就是全局变量
2012-09-20 23:36
856 查看
标准规范
<div id="foo"></div>
这样一来,上面的的div元素就可以通过window.foo(和其他的window属性一样),或者全局变量foo来访问到.比如,在Chrome控制台中,你可以这样做:
复制代码 代码如下:
> "foo" in window
true
> foo
<div id="foo"></div>
Firefox
火狐(14)的工作方式略有不同.
复制代码 代码如下:
> "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
复制代码 代码如下:
> "foo" in window
false
> typeof foo // 这个全局变量到底有木有?
object
//错误控制台输出了下面的警告.//Element referenced by ID/NAME in the global scope.
//Use W3C standard document.getElementById() instead.
HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.
- 如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
- 如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个.
让我们看一个例子.假定存在一个页面,该页面包含了一个ID属性为“foo”的div元素:
<div id="foo"></div>
这样一来,上面的的div元素就可以通过window.foo(和其他的window属性一样),或者全局变量foo来访问到.比如,在Chrome控制台中,你可以这样做:
复制代码 代码如下:
> "foo" in window
true
> foo
<div id="foo"></div>
Firefox
火狐(14)的工作方式略有不同.
复制代码 代码如下:
> "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
复制代码 代码如下:
> "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更快点.
相关文章推荐
- js DOM 元素ID就是全局变量
- js DOM 元素ID就是全局变量
- [译]DOM:元素ID就是全局变量
- js在safari浏览器下声明变量时会根据变量名和页面Dom元素id自动初始化为Dom类型
- 关于js全局变量数组push数据时dom中无数据的问题
- ie7,ie8 js中变量名和页面元素ID重名,报错
- 为什么给html标签定义了id,就可以在js中(浏览器环境)直接通过id引用这个dom元素?
- DOM 中的 id 属性会往全局变量中添加 id 值的变量
- 83 js 如何正确传递DOM元素的指针 选择器内参数为变量 论js函数的简化 seajs用法
- js特殊例子--方法内重新定义了变量在后面就会前面的为undifined,后面没有定义就用全局的--各种专业文献上的“闭包”(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函
- js中,全局变量与直接添加在window属性的区别
- js获取Dom元素的属性样式
- js全局变量和局部变量
- 用js获取网页DOM(例:input标签的ID)的chrome插件
- 设定JS全局的公共变量
- (译)Node.js的全局变量
- 关于android webview读取js全局变量或者函数返回值
- js便签笔记(2)——DOM元素的特性(Attribute)和属性(Property)
- Node.js核心模块_全局变量、util学习
- js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性