Исключить конкретный элемент по идентификатору в querySelectorAll

Question

Я пытаюсь получить длину массива из:

document.querySelectorAll('select,input,textarea');
alert(Object.keys(arr).length);//19

Внутри этого массива я должен исключить 4 элемента: 2 input type="hidden" и 2 с указанным id's, поэтому я пытаюсь использовать :not selector:

document.querySelectorAll('select,input,textarea,input:not[type="hidden",input:not[id="input_up_img_perfil"],input:not[id="sub_img_perfil"],');
alert(Object.keys(arr).length);//19

Каков правильный синтаксис для этого запроса?

Answer 1

Например

<input class="test">
<input class="test asd">

Попробуйте что-то вроде этого:

document.querySelectorAll('span.test:not(.asd)');

Вместо:

document.querySelectorAll('select,input,textarea,input:not[type="hidden",input:not[id="input_up_img_perfil"],input:not[id="sub_img_perfil"],');

Answer 2

Попробуйте это:

document.querySelectorAll('select,input:not([type="hidden"]):not(#input_up_img_perfil):not(#sub_img_perfil),textarea');

Это должно работать довольно хорошо;)

Это на самом деле довольно просто: во-первых, вам нужно добавить скобки к оператору :not.Затем вам нужно подумать о правильном CSS-запросе, чтобы выбрать то, что вам нужно.

Пример, который будет не работать:

'input:not([type="hidden"]),input:not(#input_up_img_perfil),input:not(#sub_img_perfil)'

, потому что у вас фактически три запросаи результат будет объединен в конце, так как input:not(#input_up_img_perfil) не имеет ограничений для скрытых полей, вы получите их в результате, даже если вы установите input:not([type="hidden"]).

Вот почему вам нужно сделатьследующее:

'input:not([type="hidden"]):not(#input_up_img_perfil):not(#sub_img_perfil)'

Здесь у вас есть только один запрос к входному тегу с тремя ограничениями!

Надеюсь, это понятно;)

Answer 3

Вы можете преобразовать коллекцию узлов в массив, а затем использовать Array#filter, чтобы отфильтровать ненужные элементы:

Array.from(document.querySelectorAll('select,input,textarea'))
  .filter(item => item.type !== 'hidden' || item.id !== 'input_up_img_perfil' || item.id !== 'sub_img_perfil');