获取具有 name="id" 的子输入的表单的 id答案

【问题标题】：Grab id of a form that has a child input with a name="id"获取具有 name="id" 的子输入的表单的 id
【发布时间】：2015-04-06 01:02:55
【问题描述】：

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

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

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

这是重现问题的小提琴 -> http://jsfiddle.net/jascbbfu/

【问题讨论】：

为什么要查找表单的id？你已经有了...
嗯，在你的 jsfiddle 中，我注意到第二个测试输入的名称是 'id1'；我敢打赌它会将.id 解释为该名称的子元素，而不是其自身的实际属性。我去看看 jsfiddle
@Deep 我知道我有 id，它是一个概念证明......

【解决方案1】：

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

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

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

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

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

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

【讨论】：

谢谢，不知道你可以覆盖这样的属性，非常hacky ;p 我可能会使用 getAttribute 或添加自定义属性（例如“column =”），因为我喜欢映射的想法我的表单直接输入到我的数据库列。

【解决方案2】：

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

【讨论】：

【解决方案3】：

因为这里有这行：

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

当你说：

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

这将是<input> 元素。将其更改为 id 以外的其他名称即可。

【讨论】：

【解决方案4】：

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

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

希望有帮助！

【讨论】：