选择具有数据属性的表单：JavaScript答案

【问题标题】：Select Form with Data Attribute: JavaScript选择具有数据属性的表单：JavaScript
【发布时间】：2020-03-15 20:15:15
【问题描述】：

我有许多表单，每个表单的数据属性为data-validate。我知道我可以使用以下查询选择这些表单：document.querySelectorAll('form[data-validate]')。

不过，我有两个问题。首先，我如何使用document.forms 选择相同的表单。其次，一种方法是否优于另一种方法？也就是说，我用document.forms还是document.querySelectorAll有区别吗？

谢谢。

【问题讨论】：

document.forms 和 document.querySelectorAll('form') 将在可迭代集合中返回相同的表单元素。但是，不同之处在于，如果您执行document.forms，它将选择所有<form> 元素，无论它们是否具有data-validate 属性，而document.querySelectorAll('form[data-validate]') 允许您取利用浏览器内置的选择器系统过滤您的收藏。
您可以使用 Array.from(document.forms).filter(form => form.getAttribute('data-validate')) 之类的东西，但是否“更好”很大程度上取决于意见。

【解决方案1】：

首先，我如何使用 document.forms 选择相同的表单

document.forms 仅允许通过其索引、名称或 id 来寻址表单，而不是遍历 document.forms 中的所有值并依次测试每个值以查看它是否具有 data-validate 属性：您可以不。

其次，一种方法比另一种更可取吗？

偏好是一个见仁见智的问题。（尽管将过滤留给本机代码的涉及较少代码的代码更符合“更好”的标准）。

【讨论】：