在 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

该查询的正确语法是什么？

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) 对隐藏字段没有限制，即使您设置了input:not([type="hidden"])，您也会在结果中获得它们。

这就是为什么您需要执行以下操作：

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

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

希望这很清楚;)

Answer 2

举例

<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 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');