最佳做法：通过 HTML ID 或名称属性访问表单元素？

javascript dom html forms

2022-08-30 02:31:25

正如任何经验丰富的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）特别感兴趣。

答案 1

仅为您的表单提供一个 ID，并且仅输入一个名称：

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

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

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

使用而不是只是更可取，因为后者可能会返回名为“foo”而不是HTML元素形式的属性！.elements["foo"].foo

答案 2

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

"不，永不！当我看到这种元素访问方法时，我想到了。这样做的问题是，它假设DOM是一个正常的数据结构（例如：数组），其中元素顺序是静态的，一致的或可靠的。我们知道99.9999%的时间，情况并非如此。对窗体中的元素进行重新排序、在相关窗体之前向页面添加其他元素或移动相关窗体都是此代码中断的情况。短篇小说：这是非常脆弱的。一旦你添加或移动一些东西，它就会破裂。inputform

[2] document.myForm.foo;

我和谢尔盖·伊林斯基（Sergey ILinsky）一起讨论这个问题：

通过引用任意元素的属性来访问它们：iddocument.getElementById("myform");
按名称访问命名表单元素（相对于其父表单元素）：document.getElementById("myform").foo;

此方法的主要问题是，该属性在应用于表单时是无用的。该名称不会作为 POST/GET 的一部分传递到服务器，并且不适用于哈希样式书签。name

[3] document.getElementById（'foo'）;

在我看来，这是最可取的方法。直接访问是最简洁明了的方法。

[4] document.getElementById（'myForm'）.foo;

在我看来，这是可以接受的，但比必要的更冗长。方法#3是可取的。

我碰巧在看道格拉斯·克罗克福德（Douglas Crockford）的视频，他参与了这个话题。兴趣点在-12：00。总结一下：

文档集合（document.anchor、document.form 等）已经过时且无关紧要（方法 1）。
该属性用于命名事物，而不是访问它们。它用于命名窗口，输入字段和锚点标签等内容。name
“ID是您应该用来唯一标识元素的东西，以便您可以访问它。它们（名称和ID）曾经是可以互换的，但现在不再是了。

所以你有它。从语义上讲，这是最有意义的。