一行代码告别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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
jQuery实现验证码功能
Mar 17 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
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
德生PL330的评价与改造
2021/03/02 无线电
php多维数组去掉重复值示例分享
2014/03/02 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
javascript代码加载优化方法
2011/01/30 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
python如何删除列为空的行
2020/07/17 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
Python中return函数返回值实例用法
2020/11/19 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
python飞机大战游戏实例讲解
2020/12/04 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
优秀校长事迹材料
2014/12/24 职场文书
室外天线与收音机天线杆接合方法
2022/04/05 无线电