js DOM 元素ID就是全局变量


Posted in Javascript onSeptember 20, 2012

标准规范

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试验时,的确有警告.

js DOM 元素ID就是全局变量

[注意:例子中的代码只能在网页中通过script标签运行才能见效,不能通过终端运行.这是因为终端在处理全局对象时,使用了不同的方式.]

译者注:我在Firebug中尝试例子中的代码,并没发现有什么差别.

一旦你尝试读取foo的值,虽然会正常返回那个div元素,但同时错误控制台会有警告,告诉你不应该那么做.很显然,这样的警告是正确的:在终端调试的时候,你可以使用这个特性,但在实际的代码中,不应该使用.

Cody Lindley写了一个jsPerf测试来比较通过全局变量访问foo和通过window.foo来访问foo的性能差别.有趣的是,只有在Firefox中访问window.foo更快点.

Javascript 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 #Javascript
JavaScript 更严格的相等 [译]
Sep 20 #Javascript
JavaScript 反科里化 this [译]
Sep 20 #Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 #Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 #Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 #Javascript
javascript分页代码(当前页码居中)
Sep 20 #Javascript
You might like
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
python安装及变量名介绍详解
2020/12/12 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
亿企通软件测试面试题
2012/04/10 面试题
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
12岁生日感言
2014/01/21 职场文书
财务总经理岗位职责
2014/02/16 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
JS的深浅复制详细
2021/10/16 Javascript