JavaScript 选择 HTMLInputElement 在我没想到的时候起作用了

Question

我有以下 HTML 页面，我需要在其中将来自 HTMLInputElement 的输入值提供给 mine JavaScript 函数。

<input id="input">
<span>
    <button onclick="mine(input)">Mine!</button>
</span>

mine: function (input) {
    alert(input.value);
},

我打算将控件 Id 传递给函数，然后找到并操作该控件。我想我需要使用类似 document.getElementById 或其等效的 JQuery 的东西。

然而，我惊讶地发现我只能使用 input.value。

这是如何工作的？

Answer 1

这是因为 id 被用作 window(全局对象)上的属性，它指向具有该 id 的节点。

您可以阅读它的规范 here

不建议使用此行为，因为它更像是遗留支持的“功能”，如果您与另一个变量发生冲突，例如如果您使用了 id "top" 或者如果您有另一个节点具有第一个匹配的 name 属性。

• 结果也可能是 HTMLCollection 而不是 HTMLElement。
• 如果该值还没有标识符(例如，您 var 或它是像 alert 这样的本地事物)，结果将是来自的第一个匹配项
  1. 子窗口的名称
  2. 具有此值的 name 属性的所有节点
     • 如果只有一个节点，则返回该节点。否则返回一个 HTMLCollection。
  3. 具有此值的id属性的节点

如您所见，这种行为很容易产生意想不到的结果，因此

不要使用它。