Выбор нескольких элементов с помощью querySelectorAll

у меня есть этот кусок кода:

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.

8
css-selectors javascript selectors-api

2 ответов

как сказал Shadow Wizard, как минимум, вы можете удалить ненужные :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 также обычно хорошее место для этого.

6

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