Javascript 最佳实践：通过HTML id或名称属性访问表单元素？

任何经验丰富的JavaScript开发人员都知道，有很多（太多）方法可以做同样的事情。例如，假设您有一个文本字段，如下所示：

<form name="myForm">  
    <input type="text" name="foo" id="foo" />

---

方法[1]和[3]在Mozilla Gecko文档中有很好的记录，但都不理想。[1] 太笼统了，没有用处，[3]需要id和名称（假设您将数据发布到服务器端语言）。理想情况下，最好只有一个id属性或name属性（两者都有点冗余，特别是在任何css都不需要id的情况下，并且会增加拼写错误的可能性，等等）

[2] 这似乎是最直观的，而且似乎被广泛使用，但我还没有在Gecko文档中看到它的引用，我担心的是转发兼容性和跨浏览器兼容性（当然，我希望尽可能符合标准）

那么这里的最佳实践是什么？有人能指出DOM文档或W3C规范中可以解决这个问题的东西吗

---

注意我对非库解决方案（jQuery/Prototype）特别感兴趣。

要访问放置在表单中的命名元素，最好使用

表单

对象本身

---

要访问DOM树中的任意元素（有时可能在表单中找到），请使用

getElementById

，元素的

id

，表单2可以，也建议使用表单3。
名称和id之间的冗余是由于需要保持兼容性，在HTML5上，某些元素（如img、表单、iframe等）将丢失其“名称”属性，建议从现在起仅使用其id引用它们：）

[1] document.forms[0]。元素[0]

当我看到这种元素访问方法时，我想到了“No omg never！”。问题在于，它假设DOM是一个正常的数据结构（例如数组），其中元素顺序是静态的、一致的或可靠的。我们知道99.9999%的时间，事实并非如此。重新排序或

输入表单中的

元素，将另一个

表单

添加到相关表单之前的页面，或移动相关表单都是此代码中断的情况。短篇故事：这是非常脆弱的。一旦你添加或移动某个东西，它就会破裂

[2] document.myForm.foo

我同意这一点：

• 通过引用任意元素的

  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）过去是可互换的，但现在不再是了

好了。从语义上讲，这是最有意义的。

查看此页面：

---

它必须是“elements”，并且必须返回一个数组，因为不止一个元素可以具有相同的名称。

它并没有真正回答您的问题，只是在这一部分：

---

[3] 需要id和名称。。。两者兼而有之有些多余

您很可能需要在每个表单字段上都有一个

id

属性，这样您就可以将其

元素与之关联，如下所示：

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

Foo:

这是可访问性所必需的（即，如果您不将表单标签和控件关联起来，为什么您如此讨厌盲人？）

---

它有点多余，但如果您有复选框/单选按钮，其中多个复选框/单选按钮可以共享一个

名称

，那么它就不那么多余了。最后，

id

和

name

用于不同的目的，即使两者通常设置为相同的值。

为了补充其他答案，document.myForm.foo是所谓的DOM级别0，这是Netscape实现的方法，因此不是真正的开放标准，即使大多数浏览器都支持它。

我更喜欢第五种方法。那就是
[5] 使用特殊的JavaScript标识符this将表单或字段对象从事件处理程序传递给函数

具体而言，对于表格：

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

使用此技术，函数永远不必知道
-表单在页面中定义的顺序，
-表单ID，或
-表单名称

同样，对于字段：

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

---

在这种情况下，函数永远不需要知道特定权重字段的名称或id，尽管它确实需要知道权重限制字段的名称。

由于过时，我一直使用“document.myform.myvar”语法，但我最近发现它在Chrome中失败（在Firefox和IE中可以）。这是一个Ajax页面（即加载到div的innerHTML属性中）。也许Chrome没有将表单识别为主文档的一个元素。我使用了getElementById（不引用表单），它可以工作

<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 !=...

<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;
}

var frm = document.getElementById('frm_name');
for(var i = 0; i < frm.elements.length;i++){
   ..frm.elements[i]..

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

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

<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.forms['idOfTheForm'].nameOfTheInputFiled.value;