Queryselector删除冗余的逗号分隔项目列表

Question

querySelector中是否有分组功能？ 目前我必须列出我想要匹配的所有输入类型，这会产生如下的冗余字符串：

form.querySelectorAll('input[type=text], input[type=password], input[type=email], input[type=number]')

有没有办法删除冗余可能看起来像这样：

form.querySelectorAll('input[type={text,password,email,number}]')

Answer 1

没有内置的方法可以做到这一点，但是很容易构建自己的函数，可以构建这样的查询字符串，允许您编写更多的DRY代码：

 const makeQuery = types => types.map(type => `input[type="${type}"]`).join(', '); console.log(makeQuery(['text', 'password', 'email', 'number'])) 

Answer 2

就CSS选择器而言，只有:matches 。 它没有太大的改进，并且除了Safari之外，在任何浏览器中都没有前缀。

form.querySelectorAll(
    'input:matches([type=text], [type=password], [type=email], [type=number])')

您可以使用JavaScript构建字符串：

form.querySelectorAll(
    'text,password,email,number'.replace(/\w+/g, 'input[type=$&]'))