通过其全局变量访问具有ID的元素

Question

大多数* Web浏览器为具有id属性的页面上的每个元素创建一个全局变量，这是一个不那么广为人知的事实：

HTML：

<header id="page-header"></header>

JS：

window['page-header'].style.fontFamily = "Comic Sans MS";

我的问题：

• 这是选择元素的可靠方法吗？
• 有没有理由使用document.getElementByID ？ 我猜想用全局变量访问ID'd元素会比document.getElementByID更快。

这是一个演示。
*我已经在Chrome，Firefox和IE的最新版本中对此进行了测试。

Answer 1

我在jsperf上测试了它，使用Chromium v​​25 getElementByID要快得多

Answer 2

有些事情需要考虑：

如果window对象已具有具有该名称的属性，则不会覆盖该对象。

像img这样使用name属性的元素也将成为window对象的属性。 由于name属性不需要是唯一的，因此可能会发生这种情况：

<img name="test"/>
<img name="test"/>
<img id="test"/>

在一些较旧的浏览器中， window.test将返回包含三个元素的NodeList。

因此使用getElementById方法更安全。