最佳实践:按HTML ID或名称属性访问表单元素？

Question

正如任何经验丰富的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 ...

方法[1]和[3]在Mozilla Gecko文档中有详细记载,但都不是理想的.[1]过于笼统而无用,[3]同时需要id和名称(假设您将数据发布到服务器端语言).理想情况下,最好只有一个id属性或一个name属性(两者都有点多余,特别是如果id不是任何css所必需的,并且增加了拼写错误的可能性等).

[2]似乎是最直观的,它似乎被广泛使用,但我没有看到它在Gecko文档中引用,我担心向前兼容性和跨浏览器兼容性(当然我想成为尽可能符合标准).

那么这里最好的做法是什么？任何人都可以指出DOM文档或W3C规范中可以解决此问题的内容吗？

注意我对非库解决方案(jQuery/Prototype)特别感兴趣.

Answer 1

仅为您的表单提供ID,并且您的输入仅为名称:

<form id="myform">
  <input type="text" name="foo">

然后,访问输入元素的最符合标准且问题最少的方法是:

document.getElementById("myform").elements["foo"]

使用.elements["foo"]而不是just .foo更可取,因为后者可能返回名为"foo"的形式的属性而不是HTML元素!

Answer 2

[1] document.forms [0] .elements [0];

当我看到这种元素访问方法时,脑海中浮现出 " No-omg-never! ".这样的问题在于它假设DOM是普通数据结构(例如:数组),其中元素顺序无论如何都是静态的,一致的或可靠的.我们知道99.9999%的时间,事实并非如此.input在表单中重新排序或元素,在相关表单form之前向页面添加另一个元素,或移动相关表单都是此代码中断的所有情况.短篇小说:这很脆弱.一旦你添加或移动某些东西,它就会破裂.

[2] document.myForm.foo;

我和Sergey ILinsky在一起:

• 通过引用其id属性来访问任意元素:document.getElementById("myform");
• 按名称访问命名表单元素,相对于其父表单元素: document.getElementById("myform").foo;

我使用此方法的主要问题是该name属性在应用于表单时无用.该名称不作为POST/GET的一部分传递给服务器,并且不适用于散列样式书签.

[3] document.getElementById('foo');

在我看来,这是最好的方法.直接访问是最简洁明了的方法.

[4] document.getElementById('myForm').foo;

在我看来,这是可以接受的,但比必要的更冗长.方法#3是优选的.

我恰巧正在观看道格拉斯·克罗克福德的一段视频,并且他正在考虑这个问题.兴趣点在-12:00.总结一下:

• 文档集合(document.anchor,document.form等)已过时且无关紧要(方法1).
• 该name属性用于命名事物,而不是访问它们.它用于命名窗口,输入字段和锚标记等内容.
• "你应该使用ID来唯一地标识一个元素,以便你可以访问它.它们(名称和ID)曾经是可以互换的,但它们已经不存在了."

所以你有它.从语义上讲,这是最有意义的.

Answer 3

要访问放置在表单中的命名元素,最好使用form对象本身.

要访问DOM树中的任意元素(有时可能在表单中找到),请使用getElementById和元素id.

Answer 4

我更喜欢第五种方法.即
[5]使用特殊的JavaScript标识符此窗体或字段对象传递给从事件处理程序的功能.

具体来说,对于表格:

<form id="form1" name="form1" onsubmit="return validateForm(this)">

和

// The form validation function takes the form object as the input parameter
function validateForm(thisForm) {
  if (thisform.fullname.value !=...

使用这种技术,函数永远 不必知道
- 页面中定义表单的顺序,
- 表单ID,还是
表单名称

同样,对于字段:

<input type="text" name="maxWeight">
...
<input type="text" name="item1Weight" onchange="return checkWeight(this)">
<input type="text" name="item2Weight" onchange="return checkWeight(this)">

和

function checkWeight(theField) {
  if (theField.value > theField.form.maxWeight.value) {
    alert ("The weight value " + theField.value + " is larger than the limit");
    return false;
  }
return true;
}

在这种情况下,函数永远不必知道特定权重字段的名称或ID,但它确实需要知道权重限制字段的名称.

Answer 5

它并没有真正回答你的问题,只是在这一部分:

[3]需要一个id和一个名字......两者都有点多余

您最有可能需要id在每个表单字段上都有一个属性,以便您可以将其<label>元素与它相关联,如下所示:

<label for="foo">Foo:</label>
<input type="text" name="foo" id="foo" />

这是可访问性所必需的(即如果你不关联表单标签和控件,为什么你这么讨厌盲人？).

这有点多余,虽然当你有复选框/单选按钮时会少一些,其中有几个可以共享一个name.最终,id并且name用于不同的目的,即使两者通常设置为相同的值.

Answer 6

这有点旧，但是我想补充一点我认为相关的东西。
（我打算在上面的一个或两个线程上发表评论，但似乎我需要信誉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>

您可以通过使用
document.mainForm.R1.value
或
document.getElementById（“ mainForm”）。R1.value 来获取/设置单选按钮R1的整体检查值。
因此，如果您想使用单一样式，可以希望始终使用此方法，而不管表单元素的类型如何。我，我很舒服地按名称访问单选按钮，按ID访问文本框。