js DOM 元素ID就是全局变量
有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再详细解释一下
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元素中绑定的所有事件,模仿 chrome getEventListeners
偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...
- JS DOM元素的操作(创建,添加,删除,和修改属性)
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- JS DOM元素
// 为element增加一个样式名为newClassName的新样式 function addClass(element, newClassName) { var value = element.c ...
- js dom元素加载完成执行
//dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...
- js正则获取html字符串指定的dom元素和内容
var str = "<div>111<p id='abc'>3333</p></div><div>222<div id=' ...
- HTML DOM元素的Dragdrop
在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的ja ...
- 不获取元素,直接使用id操作dom元素
今天无意中发现个让我很吃惊的问题. 不使用getElementById方法,也可以用id直接操作有id的元素. 继续搜索后,发现name也可以直接操作... 这让我大感意外,了解以后,忍不住写点东西记 ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
随机推荐
- MySql之触发器【过度变量 new old】
trigger是由事件触发某个操作.这些事件包括insert语句.update语句和delete语句.当数据库执行这些事件时,就会激活触发器执行相应的操作. [1]只有一个执行语句 create tr ...
- iisNS 安装程序的思路
1. 安装程序的目录和 frontEnd一个目录,通过判断是否存在 common/config/db.php 来验证是否已经安装过,如果已经安装过,该文件会自动生成 2. 如果没有安装过,则跳转到 ...
- PAT (Advanced Level) Practise 1003 Emergency(SPFA+DFS)
1003. Emergency (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue As an emerg ...
- maven-surefire-plugin总结
Maven通过Maven Surefire Plugin插件执行单元测试.(通过Maven Failsafe Plugin插件执行集成测试) 在pom.xml中配置JUnit,TestNG测试框架的依 ...
- AngularJS 初识笔记
test.html: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta chars ...
- ExtJS笔记3 MVC Architecture
MVC Architecture MVC架构 Contents File Structure Creating the application in app.js Defining a Contr ...
- RT-Thread相同优先级线程的调度
/* 静态线程的 线程堆栈*/ ]; ]; /* 静态线程的 线程控制块 */ static struct rt_thread thread_test1; static struct rt_threa ...
- StartSSL免费证书申请笔记
第一步:申请startssl账号 填写相应信息后,你所填写的邮箱会收到邮件 里面有一个用来验证的验证码 输入得到的.... 注册成功后会安装数字证书(注意:注册过程中没有叫输入账号密码,这也是通过证认 ...
- excel15个技巧
自动定时保存Excel中的文件 点击“工具”菜单“自动保存”项,设置自动保存文件夹的间隔时间.如果在“工具”菜单下没有“自动保存”菜单项,那么执行“工具”菜单下“加载宏…”选上“自动保存”,“确定”. ...
- Ubuntu 更改默认apt-get源
原文转自:http://zhoushijun.iteye.com/blog/1942475 方法: 1.修改源地址:cp /etc/apt/sources.list /etc/apt/sources. ...