一行代码告别document.getElementById_javascript技巧
程序员文章站
2022-03-30 14:32:20
...
所以绝大多数的脚本里,都是直接通过元素的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 {
if(list[i].id)
window[list[i].id] = list[i];
}
当然,只有FF需要这个hack,所以我们先检测下是否有其特征。最后精简下代码,利用数组遍历回调,即可压缩到简单的一行:
不过有个值得注意的地方,在文档载入尚未完成前 querySelectorAll,只能查询当前
后来随着各种浏览器接踵而至,逐渐的替代了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 {
if(list[i].id)
window[list[i].id] = list[i];
}
当然,只有FF需要这个hack,所以我们先检测下是否有其特征。最后精简下代码,利用数组遍历回调,即可压缩到简单的一行:
复制代码 代码如下:
不过有个值得注意的地方,在文档载入尚未完成前 querySelectorAll,只能查询当前
上一篇: 使用gulp如何创建完整的项目流程
推荐阅读
-
Python 把较长的一行代码分成多行的技巧
-
温习Android基础知识——《第一行代码(第三版)》读书笔记 Chapter 14 高级技巧
-
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版_javascript技巧
-
Python 把较长的一行代码分成多行的技巧
-
只需一行代码,轻松实现一个在线编辑器_javascript技巧
-
一行代码实现纯数据json对象的深度克隆实现思路_javascript技巧
-
JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版_javascript技巧
-
一行代码实现纯数据json对象的深度克隆实现思路_javascript技巧
-
php一行代码获取文件后缀名实例分析_php技巧
-
JavaScript 轻松搞定快捷留言功能 只需一行代码_javascript技巧