最佳实践:通过HTML id或name属性访问表单元素？
正如任何经验丰富的JavaScript开发人员都知道的那样，有许多(太多)方法可以做同样的事情。例如，假设您有一个文本字段，如下所示：
<form name="myForm">
<input type="text" name="foo" id="foo" />在JavaScript中有很多方法可以访问它：
[1] document.forms[0].elements[0];
[2] document.myForm.foo;
[3] document.getElementById('foo');
[4] document.getElementById('myForm').foo;
... and so on ...Mozilla Gecko文档中很好地记录了方法1和3，但这两种方法都不理想。1太通用而没有用，而3需要id和名称(假设您要将数据发布到服务器端语言)。理想情况下，最好只有一个id属性或一个name属性(拥有这两个属性有点多余，特别是如果id对于任何css都不是必需的，并且增加了输入错误的可能性等)。
2似乎是最直观的，它似乎被广泛使用，但我还没有在Gecko文档中看到它，我担心向前兼容性和跨浏览器兼容性(当然，我希望尽可能符合标准)。
那么这里的最佳实践是什么呢？有谁能指出DOM文档或W3C规范中可以解决这个问题的方法吗？
注我对非库解决方案(jQuery/Prototype)特别感兴趣。
回答 10
Stack Overflow用户
发布于 2010-03-13 04:10:47
要访问表单中的命名元素，最好使用form对象本身。
要访问DOM树中偶尔可以在表单中找到的任意元素，可以使用getElementById和元素的id。
Stack Overflow用户
发布于 2017-03-31 10:58:16
这有点老了，但我想补充一件我认为相关的事情。
(我打算在上面的一两个帖子上发表评论，但似乎我需要声誉50，而我在写这篇文章的时候只有21个。:)
我只想说，有时按名称而不是按id访问表单的元素要好得多。我不是在谈论表单本身。表单，好的，你可以给它一个id，然后通过它来访问它。但是，如果表单中有一个单选按钮，那么将其用作单个对象(获取和设置它的值)要容易得多，而且据我所知，您只能按名称执行此操作。
示例：
<form id="mainForm" name="mainForm">
<input type="radio" name="R1" value="V1">choice 1<br/>
<input type="radio" name="R1" value="V2">choice 2<br/>
<input type="radio" name="R1" value="V3">choice 3
</form>您可以使用以下命令整体获取/设置单选按钮R1的检查值
document.mainForm.R1.value
或
document.getElementById("mainForm").R1.value
因此，如果您希望具有单一样式，则可能希望始终使用此方法，而不管表单元素的类型。对于我来说，我可以通过名称访问单选按钮，通过id访问文本框。
Stack Overflow用户
发布于 2013-11-26 20:08:13
我一直使用'document.myform.myvar‘语法，但最近我发现它在Chrome上失败了(在火狐和IE中还可以)。这是一个Ajax页面(即加载到div的innerHTML属性中)。也许Chrome没有将表单识别为主文档的一个元素。我使用了getElementById (没有引用表单)，它工作得很好。
https://stackoverflow.com/questions/2435525
复制相似问题