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

Question

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

HTML：

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

JS：

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

我的问题：

• 这是选择元素的可靠方法吗？
• 使用document.getElementByID的任何理由？我猜想使用全局变量访问ID＆lt; d}元素会比document.getElementByID快。

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

Answer 1

我在jsperf上进行了测试，使用Chromium v​​25 getElementByID的速度要快得多

Answer 2

需要考虑的一些事项：

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

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

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

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

因此使用getElementById方法更安全。