在querySelectorAll上按id排除特定元素

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

该查询的正确sintax是什么？

Answer 1

试试这个：

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)对隐藏字段没有约束，即使你设置了{{1}，你也会在结果中得到它们}}

这就是您需要执行以下操作的原因：

input:not([type="hidden"])

在这里，输入标签只有一个查询，有三个约束！

希望这很清楚;）

Answer 2

您可以将节点集合转换为数组，然后使用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');

Answer 3

例如

<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"],');