使用 querySelectorAll 选择多个元素答案

【问题标题】：Selecting multiple elements with querySelectorAll使用 querySelectorAll 选择多个元素
【发布时间】：2014-01-07 19:11:06
【问题描述】：

我有这段代码：

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 函数资源。

【问题讨论】：

仅供参考，select 和 textarea 元素没有任何类型属性。
什么是变量el？
@ShadowWizard 你是对的，CopyPasta 剩菜。 @Kevin el = document.body.
您可以只选择它们并在遍历元素时检查必需/禁用/只读。

标签： javascript css-selectors selectors-api

【解决方案1】：

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]),

【讨论】：

【解决方案2】：

正如暗影巫师所说，你至少可以在各个没有意义的地方删除不必要的: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 通常也是存放这些东西的好地方。

【讨论】：