Heim > Artikel > Web-Frontend > 一行代码告别document.getElementById_javascript技巧

一行代码告别document.getElementById_javascript技巧

WBOYOriginal: 2016-05-16 17:52:511386Durchsuche

所以绝大多数的脚本里，都是直接通过元素的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，所以我们先检测下是否有其特征。最后精简下代码，利用数组遍历回调，即可压缩到简单的一行：

复制代码代码如下:

 
<script> <BR>if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k){this[k.id]=k}); <BR></script> 

　　不过有个值得注意的地方，在文档载入尚未完成前 querySelectorAll，只能查询当前<script>之前的元素。所以以上代码必须放在文档的末尾。而使用id访问，也必须在文档载入完成之后，否则就可能找不到这个元素。下面是个测试页面，在所有浏览器下都通过： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="17236" class="copybut" id="copybut17236" onclick="doCopy('code17236')"><U>复制代码代码如下:<div class="codebody" id="code17236"> <BR><!DOCTYPE html> <BR><html> <BR><head> <BR><title>No document.getElementById <BR> <BR><body> <BR><div id="mytag"> <BR><script> <BR>onload = function() <BR>{ <BR>mytag.innerHTML = "Goodbye, document.getElementById!"; <BR>} <BR></script>
<script> <BR>if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(e){self[e.id]=e}); <BR></script>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：基于jQuery的360图片展示实现代码_jqueryNächster Artikel：通过Javascript将数据导出到外部Excel文档的函数代码_javascript技巧

In Verbindung stehende Artikel

Mehr sehen