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 相关文章推荐
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
javascript实现标签切换代码示例
May 22 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
js实现无缝轮播图插件封装
Jul 31 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
php 表单数据的获取代码
2009/03/10 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
python实现进程间通信简单实例
2014/07/23 Python
Python中几种导入模块的方式总结
2017/04/27 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python 图像平移和旋转的实例
2019/01/10 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
python pandas模块基础学习详解
2019/07/03 Python
python中关于数据类型的学习笔记
2020/07/19 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
十月份红领巾广播稿
2014/01/22 职场文书
学校门卫岗位职责
2014/03/16 职场文书
活动总结怎么写
2014/04/28 职场文书
技术员个人工作总结
2015/03/03 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书