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

Accessing elements with IDs via their global variables

本文关键字：id 元素 全局变量 访问      更新时间：2023-09-26

这是一个不太为人所知的事实，大多数web浏览器为页面上每个具有id属性的元素创建一个全局变量:

HTML: 

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


JS: 

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


我的问题:

  • 这是一种可靠的选择元素的方法吗?
  • 有理由用document.getElementByID代替吗?我猜访问带有全局变量的ID元素会比document.getElementByID更快。


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

我在jsperf和Chromium v25上测试了它，getElementByID要快得多

注意事项:

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

像img这样使用name属性的元素也将成为窗口对象的属性。因为name属性不需要是唯一的，所以可能会出现这种情况:

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

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

所以使用getElementById方法更安全。

相关文章：