正如任何经验丰富的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)特别感兴趣。
发布于 2010-03-13 04:10:47
要访问表单中的命名元素,最好使用form
对象本身。
要访问DOM树中偶尔可以在表单中找到的任意元素,可以使用getElementById
和元素的id
。
发布于 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访问文本框。
发布于 2013-11-26 20:08:13
我一直使用'document.myform.myvar‘语法,但最近我发现它在Chrome上失败了(在火狐和IE中还可以)。这是一个Ajax页面(即加载到div的innerHTML属性中)。也许Chrome没有将表单识别为主文档的一个元素。我使用了getElementById (没有引用表单),它工作得很好。
https://stackoverflow.com/questions/2435525
复制相似问题