一行代码告别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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
javascript如何写热点图
Dec 08 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
彻底揭秘keep-alive原理(小结)
May 05 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
Python变量和字符串详解
2017/04/29 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Django 多环境配置详解
2019/05/14 Python
python调试神器PySnooper的使用
2019/07/03 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
什么是属性访问器
2015/10/26 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
工地标语大全
2014/06/18 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis