有人发现了一个获取带 id 的 DOM 元素的神奇方法

1,757 阅读2分钟
原文链接: zhuanlan.zhihu.com
「阅」——JSCourse 旗下栏目,专门推荐我们为大家精心挑选的优质 JavaScript 相关技术内容

最近小编看到国外有个工程师写了 一篇文章 ,小编觉得还是挺有意思的。什么事情呢? 简单地讲,他发现

HTML 中凡是带有 ID 的 DOM 元素都可以直接通过 window 对象访问到

如果你本来就知道这个事情,那么你没有必要看下去了,如果你和小编一样不知道还有这回事儿,那么不妨继续看下去了解更多细节。

下面小编来具体解释下,也就是说当你在 HTML 代码中写了一个带 id 的 DOM 元素,就像这样:

<div id="jscourse"></div>

那么一般来讲,要获取这个 DOM 元素你会通过:

document.getElementById('jscourse');

或者

document.querySelector('#jscourse');

但是呢,有意思的是,你还可以直接这样来获取:

window.jscourse // 或者直接 jscourse

什么鬼! 这是不是意味着浏览器把包含 ID 的 DOM 元素都暴露到了 window 对象上呢?

小编去找了下 w3c 标准,哟,还 真有这条

而且指出,如果遇到两个以及两个以上的包含相同 ID 的 DOM 元素,则返回包含所有这些 DOM 元素的数组。但是,值得一提的是,不是所有浏览器都根据标准实现的。

是不是挺有意思的?你可以自己去试一试。

那么这个事情有什么价值呢?小编觉得这种方式获取 DOM 元素不推荐大家使用,我们还是应该老老实实利用浏览器提供的获取 DOM 的 API 来获取, 但是这种方法你可以用来在调试的时候用(不过 HTML 也应该少用 id)。还有就是你了解了这个东西后,以后说不定遇到奇怪的 bug 的时候能够想到是否是这个造成的。

好了,本期的内容就是让大家了解一下这个挺有意思的用法,我们下期再见!

关注「jscourse」微信公众号获取更多学习课程和资料。