Выбор нескольких элементов с 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.

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