一行代码告别document.getElementById


Posted in Javascript onJune 01, 2012

所以绝大多数的脚本里,都是直接通过元素的id来访问DOM的。


后来随着各种浏览器接踵而至,逐渐的替代了ie。为了保证各路门派统一规则,标准化越来越被重视。当初那种直接访问id的方法,逐渐被document.getElementById所替代。如果这年头还在用id访问元素,要么就是做程序里的内嵌网页,要么就是像铁道部那样的超境界仿古网站:) 当然只要保证你的用户都是用ie访问,这样的非标准也但用无妨。


然而,很多第三方浏览器刚出来的时候,为了保证能与当时大量的非标准页面兼容,都保留了用id访问DOM这一非标准做法。事实上如今的主流浏览器,只有FireFox不支持这种做法,而Chrome,Opera,Safari,Mobile Safari都支持。


既然如此,我们不如让FireFox也支持,这样所有的浏览器都可以直接用id直接访问DOM,不仅快捷方便,减少了累赘的代码,更能提升运行的效率。


实现很简单,文档载入完成后查询带有id属性的元素,然后在window对象里添加其引用:

var list = document.querySelectorAll('[id]'); 
for(var i = 0; i < list.length; i++) 
{ 
if(list[i].id) 
window[list[i].id] = list[i]; 
}

当然,只有FF需要这个hack,所以我们先检测下是否有其特征。最后精简下代码,利用数组遍历回调,即可压缩到简单的一行:
<script> 
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k){this[k.id]=k}); 
</script>

不过有个值得注意的地方,在文档载入尚未完成前 querySelectorAll,只能查询当前<script>之前的元素。所以以上代码必须放在文档的末尾。而使用id访问,也必须在文档载入完成之后,否则就可能找不到这个元素。下面是个测试页面,在所有浏览器下都通过:

<!DOCTYPE html> 
<html> 
<head> 
<title>No document.getElementById</title> 
</head> 
<body> 
<div id="mytag"></div> 
<script> 
onload = function() 
{ 
mytag.innerHTML = "Goodbye, document.getElementById!"; 
} 
</script> 
<script> 
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(e){self[e.id]=e}); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
javascript的console.log()用法小结
May 31 #Javascript
jQuery 联动日历实现代码
May 31 #Javascript
从阶乘函数对比Javascript和C#的异同
May 31 #Javascript
javascript 快速排序函数代码
May 30 #Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 #Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 #Javascript
基于jquery的鼠标拖动效果代码
May 30 #Javascript
You might like
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
javascript引导程序
2008/10/26 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
Python实现扩展内置类型的方法分析
2017/10/16 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python中Django文件上传方法详解
2020/08/05 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
电子专业推荐信范文
2013/11/18 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
工地标语大全
2014/06/18 职场文书
承诺书模板
2014/08/30 职场文书
安全保证书怎么写
2015/02/28 职场文书
2015年班组工作总结
2015/04/20 职场文书
离职证明范本
2015/06/12 职场文书
绿里奇迹观后感
2015/06/15 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
golang定时器
2022/04/14 Golang