很久以前做网页的时候，几乎没有听说过 getElementById 这一玩意儿。在那个ie独占天下的年代里，做的页面也几乎都是ie only的。只要ie没问题，那就OK了。所以绝大多数的脚本里，都是直接通过元素的id来访问DOM的。
后来随着各种浏览器接踵而至，逐渐的替代了ie。为了保证各路门派统一规则，标准化越来越被重视。当初那种直接访问id的方法，逐渐被ElementById所替代。如果这年头还在用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){window[k.id]=k});
</script>
不过有个值得注意的地方，在文档载入尚未完成前 querySelectorAll，只能查询当前<script>之前的元素。所以以上代码必须放在文档的末尾。而使用id访问，也必须在文档载入完成之后，否则就可能找不到这个元素。下面是个测试页面，在所有浏览器下都通过：
<!DOCTYPE html>
<html>
<head>
<title>ElementById</title>
</head><body>
<div id="mytag"></div><script>
onload = function()
{mytag.innerHTML = "Goodbye, ElementById!";
}
</script><script>
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(e){window[e.id]=e});
</script></body>
</html>-------------------------------
最近发现FireFox也支持直接用id访问DOM了。不过还是推荐使用标准方法，或者jq的$。
本文发布于:2024-02-04 14:15:41，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170709106456294.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
