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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
Openlayers实现图形绘制
Sep 28 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php防注入及开发安全详细解析
2013/08/09 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
python实现聊天小程序
2018/03/13 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
Django返回HTML文件的实现方法
2020/09/17 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
Python中Qslider控件实操详解
2021/02/20 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
干部考核评语
2014/04/29 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
节水标语大全
2014/06/11 职场文书
供电工程专业求职信
2014/08/09 职场文书
代收款委托书范本
2014/10/01 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
实习指导老师意见
2015/06/04 职场文书
教师岗位说明书
2015/09/30 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python