javascript - 在 querySelectorAll 上按 id 排除特定元素

Question

我尝试从以下位置获取数组的长度:

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

在该数组中，我必须排除 4 个元素，即 2 个 input type="hidden"，以及 2 个具有特定 id's 的元素，所以我尝试使用 :非选择器:

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

在这里，您只有一个关于输入标签的查询，具有三个约束!

希望这是清楚的 ;)