使用querySelectorAll选择多个元素

Question

我有这段代码:

var requiredFields = el.querySelectorAll("input[required]:not(:disabled):not([readonly]):not([type=hidden])");

如果我想添加textarea和select查询我最终得到这个:

var requiredFields = el.querySelectorAll("input[required]:not(:disabled):not([readonly]):not([type=hidden])"+  
",select[required]:not(:disabled):not([readonly]):not([type=hidden])"+
",textarea[required]:not(:disabled):not([readonly]):not([type=hidden])");

我的感觉说这可能会更好......但是怎么样？

额外奖励:请为querySelectorAll函数提供一个很好的资源.

Answer 1

正如影子巫师所说,至少你可以:not([type=hidden])在各个地方删除不必要的东西(select和textarea).

我没有看到结果有问题:

var requiredFields = el.querySelectorAll(
    "input[required]:not(:disabled):not([readonly]):not([type=hidden])" +  
    ",select[required]:not(:disabled):not([readonly])"+
    ",textarea[required]:not(:disabled):not([readonly])");

...尤其是因为它将整个事情交给选择器引擎以利用它可以做的任何优化.

或者,您可以为所有相关输入提供一个公共类,然后使用:

var requiredFields = el.querySelectorAll(
    ".the-class[required]:not(:disabled):not([readonly]):not([type=hidden])");

......但我不确定它会给你买多少钱.

请给我一个很好的querySelectorAll函数资源.

有规格.MDN通常也是这个东西的好地方.