Delete specific ids in querySelectorAll

Question

I want to take the amount of elements coming from an array:

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

Inside the array I have 4 elements to exclude, where I try to use the selector :not:

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

What is the correct syntax for electing these search elements?

Answer 1

The correct syntax would be:

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

<select name="sel1">
</select>
<select name="sel2">
</select>
<select name="sel3">
</select>

<input type="text" class="inp1">
<input type="text" class="inp2" id="input_up_img_perfil">
<input type="text" class="inp3" id="sub_img_perfil">
<input type="hidden" class="inp4">
<input type="hidden" class="inp5">

<textarea class="ta1"></textarea>
<textarea class="ta2"></textarea>

Do not include input alone before because it will be selected all and the :notlater will be ignored:

                                    ↓
document.querySelectorAll('select,input,textarea,input:not...

You must reference the tag only once:

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

The properties of the element you want to select, you include within parentheses ().