一行代码告别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全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
如何通过JS实现日历简单算法
Oct 14 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
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
Javascript实现信息滚动效果
2017/05/18 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python中os模块详解
2016/10/14 Python
多版本Python共存的配置方法
2017/05/22 Python
浅谈django orm 优化
2018/08/18 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python实现时间序列可视化的方法
2019/08/06 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
python Timer 类使用介绍
2020/12/28 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
个性大学生自我评价
2013/12/04 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang
Hive HQL支持2种查询语句风格
2022/06/25 数据库