如何通过HTML id或name属性访问表单元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (133)

经验丰富的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属性或一个名称属性(两者都有些多余,特别是如果id对于任何css都不是必需的,并且增加了拼写错误的可能性等)。

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

那么这里最好的做法是什么?可以在DOM文档或W3C规范中指出可以解决这个问题的东西吗?

我特别感兴趣的是非库解决方案(jQuery / Prototype)。

提问于
用户回答回答于

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

这种访问方式的问题在于它假设DOM是一个正常的数据结构(例如:一个数组),其中元素顺序是静态的,一致的或可靠的。input表单中的重新排序或元素,在表单form之前添加另一个表单或移动表单时,都是代码中断的情况。

[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是优选的。

总结:

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

所以从语义上讲,这是最有意义的。

用户回答回答于

只给表单一个id,而输入只有一个name:

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

那么访问输入元素的最符合标准和最不成问题的方式是:

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

使用.elements["foo"]而不是仅仅.foo是可取的,因为后者可能会返回名为“foo”的表单而不是HTML元素的属性!

扫码关注云+社区

领取腾讯云代金券