最佳实践：访问单选按钮组

Question

寻找最好的、符合标准的、跨浏览器兼容的、向前兼容的方式来访问 DOM 中的一组单选按钮（这与我最近的另一篇文章密切相关......），而不使用任何外部库。

<input type="radio" value="1" name="myRadios" />One<br />
<input type="radio" value="2" name="myRadios" />Two<br />

我读过有关 getElementsByName() 的冲突信息，这似乎是执行此操作的正确方法，但我不清楚这是否是符合标准、向前兼容的解决方案。也许有更好的方法？

Answer 1

我对这个解决方案并不完全满意，但我最终在 Gecko DOM 文档中找到了这个解决方案。

name 获取或设置 DOM 对象的 name 属性，它仅适用于以下元素：anchor、applet、form、frame、iframe、image、input、map、meta、object、option、param、select 和 textarea .

HTMLElement.name = string;
var elName = HTMLElement.name;

var fControl = HTMLFormElement.elementName;
var controlCollection = HTMLFormElement.elements.elementName;

更多内容：https://developer.mozilla.org/en/ DOM/element.name

所以我认为这是一种符合标准的处理方式（尽管最佳实践可能并不存在......）

document.getElementById('myForm').elements.myRadios

Answer 2

我认为未来最好的事情是：

form.elements.myRadios

vs

form.myRadios

原因是根据最新的 spec< /a>, elements.someName 将返回一个 RadioNodeList 对象（如果多个元素具有相同的名称），其中包含一个 value 属性，指示检查项目的价值。

另一方面，form.myradios 将返回 NodeList 的对象，它只是项目的有序集合，并且没有任何 value 属性。

传统上，在单选按钮和复选框中查找选中的项目是一项非常痛苦的工作。

但是，我不确定我们如何访问复选框的所有选中元素。在规范中找不到这个。希望没有遗漏。