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函数提供一个很好的资源。

有the specification。 MDN通常也是这个东西的好地方。

Answer 2

querySelectorAll

window.l = ['input','textarea','select'];
function myQuerySelectorAll() {
    q = '';
    t = '[required]:not(:disabled):not([readonly]):not([type=hidden])';
    l.forEach(function(e) {
        q += e;
        q += t;
        q += ',';
    });
    console.log(q)
}

$> myQuerySelectorAll();
$> input[required]:not(:disabled):not([readonly]):not([type=hidden]),textarea[required]:not(:disabled):not([readonly]):not([type=hidden]),select[required]:not(:disabled):not([readonly]):not([type=hidden]),

使用querySelectorAll选择多个元素

2 个答案: