直接引用 HTML 元素

IT技术 javascript html
2021-02-15 19:10:12

可能的重复：
IE/Chrome：这里是 DOM 树元素全局变量吗？
为什么 window[id] === document.getElementById( id )

我刚刚在 html/javascript 中遇到了一些让我感到惊讶的东西。在使用 javascript 获取对 html 元素的引用时，我以前一直使用jQuery或document.getElementById. 似乎您也可以通过使用它的id. 有人可以解释这其中的细微差别吗？我用谷歌搜索但找不到任何关于这种能力的参考，每个网站都在谈论getElementById.

以下页面片段说明了这一点。

<html>
<head>
</head> 
<body>
    <input type="button" value="getElement" onclick="document.getElementById('blah').innerText = 'getElementById'" />
    <input type="button" value="direct" onclick="blah.innerText = 'direct';" />
    <div id="blah"></div>
</body>

提前谢谢了。

3个回答

能够根据元素选择页面上的元素[id]是早期 JavaScript 的一个“特性”（DOM lvl 0 或 1 我认为，似乎无法找到源）。

不幸的是，这是一个气质特征。如果你有：

<div id="window"></div>

或者

<div id="document"></div>

更好的是，这里会发生什么？

<div id="foo"></div>
<div id="bar"></div>
<script>var foo = document.getElementById('bar');</script>

因此，基于它调用元素的细微差别[id]很简单：

不要使用它。

它不一致，并且不能保证获得未来的支持。

我个人希望看到这个“功能”像document.all. 它只会引起比解决的问题更多的问题，并且document.getElementById虽然冗长，但有意义且易于理解。

我当然同意“不要使用它”，但不幸的是它已经渗透到HTML5 工作草案中。关于它的持续讨论，可以预见的是，微软正在推动标准化，而 Mozilla 正在推动将“功能”限制为仅怪癖。据我所知，微软声称改变 IE 的行为会破坏许多网站。
2021-04-26 19:10:12
@AndyE，更改任何内容都会破坏许多网站。这是因为从工作到损坏的站点范围是连续的，而不是离散的。有很多网站已经被破坏了。
2021-05-10 19:10:12

使用getElementById更加灵活和可读。例如，这行不通：

<input type="button" value="direct" onclick="document.innerText = 'direct';" />
<div id="document"></div>

出于显而易见的原因，但这将：

<input type="button" value="getElement" onclick="document.getElementById('document').innerText = 'getElementById'" />
<div id="document"></div>

其他开发人员更清楚真正发生了什么。

我不相信它是一个记录在案的功能，它似乎不适用于 Firefox (6)，但它似乎适用于最新版本的 Chrome，以及 IE 6-9。

我不会依赖它，只会认为它是浏览器功能的奇怪之处之一。

它被记录为 HTML 生活标准的一部分：html.spec.whatwg.org/multipage/...。我不确定它是什么时候添加的。同样在此答案发布后的时间里，W3C 提出了 HTML 5.2 建议，它也出现在那里。
2021-04-20 19:10:12
实际上，它也在 HTML5.1 规范中。
2021-04-23 19:10:12
其它你可能感兴趣的问题
上一篇Angular2 5 分钟安装错误 - 未定义要求 下一篇如何通过 JavaScript 禁用 Chrome 的已保存密码提示设置