获取具有名称为 "id" 的子输入的表单的 ID

Question

所以我运行遇到了一个奇怪的问题... 我想获取表单的 ID 说：

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

但是运行ning document.getElementById("test").id 并没有像预期的那样 return test 而是 return 使用 name="id" 的输入。有人知道这里发生了什么吗？

这里是 fiddle 重现问题 -> http://jsfiddle.net/jascbbfu/

Answer 1

因为这里有一行：

<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 2

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

Answer 3

JS 似乎正在考虑 id 作为您正在考虑的较大形式的子对象。您正在寻找函数 getAttribute，它在 JSfiddle 中有效：

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

希望对您有所帮助！

Answer 4

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

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

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

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

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

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

Grab id of a form that has a child input with a name="id"