javascript - 使用 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

正如 Shadow Wizard 所说，至少你可以在各个地方删除不必要的 :not([type=hidden]) 它没有意义(select 和文本区域).

我没有看到结果有问题:

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])");

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

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

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

...但我不确定它能给你带来多少。

Please give me a good resource for querySelectorAll function.

有 the specification . MDN通常也是放置这些东西的好地方。