Question

所以我遇到了一个奇怪的问题...... 我想抓住一个表格的id：

<form id="test">
    <input name="id" type="hidden" value/>
</form>

但正在运行document.getElementById("test").id并未按预期返回test，而是返回带有name="id"的输入。有人知道这里发生了什么吗？

这是一个重现问题的小提琴 - ＆gt; http://jsfiddle.net/jascbbfu/

Answer 1

表单控件名称用于创建引用控件的表单的命名属性。所以你在哪里：

<form id="test">
  <input name="id">
</form>

然后为表单的 id 属性分配对名为 id 的输入元素的引用。表单控件永远不应该被赋予与标准表单属性相同的名称，例如在下面：

<form>
  <input name="submit">
</form>

无法调用表单的提交方法，因为 form.submit 引用了输入，而不是方法。

如其他答案中所述，您可以将名称更改为不与标准表单属性冲突的内容，也可以使用 getAttribute 。第一种解决方案是首选，因为它也可能为表单控件提供更合适的名称，并避免使用 getAttribute 。

Answer 2

这里发生的事情是HTML正式化时的旧工件。它应该只位于命名集合下，但浏览器决定在各种随机位置创建快捷方式访问。无论哪种方式，您可以在这里阅读更多内容：http://jibbering.com/faq/notes/form-access/一旦我在桌面上，我将引用相关部分。

Answer 3

这是因为这一行：

<form id="test">
    <input name="id" type="hidden"/>   <!-- HERE -->
</form>

当您说：

时，浏览器认为您的意思是名称为“id”的元素

document.getElementById("test").id // Gets input with the name of "id"

哪个是<input>元素。将其更改为id以外的其他名称，它将起作用。

Answer 4

JS似乎将id视为您正在考虑的更大形式的子对象。您正在寻找函数getAttribute，这适用于JSfiddle：

alert(document.getElementById("test").getAttribute("id"));
alert(document.getElementById("test2").getAttribute("id"));

希望有所帮助！