Javascript querySelectorAll数据属性值不等于

Question

我的HTML标签具有[data-value]属性，该属性可以为0、1、2，依此类推。

如果我想获取[data-value]不等于0的元素，如何编写查询选择器？

我尝试了以下操作，但它们不起作用：

element.querySelectorAll("not[data-value='0']");
element.querySelectorAll("[data-value!='0']");

Answer 1

使用选择器字符串'div:not([data-value="0"])'：

document.querySelectorAll('div:not([data-value="0"])')
  .forEach(div => console.log(div));

<div data-value="0">0</div>
<div data-value="1">1</div>
<div data-value="2">2</div>

不幸的是，您不能在原始Javascript / CSS中使用[attrib!=value]，而必须使用:not。 （尽管，您可以在jQuery中使用[attrib!=value]）

要选择另外具有<div>属性但又不是data-value的{​​{1}}个属性，请在其中的初始0之后添加[data-value]选择器字符串：

div

document.querySelectorAll('div[data-value]:not([data-value="0"])')
  .forEach(div => console.log(div));

Answer 2

为避免选择其他div，请使用div[data-value]:not([data-value="0"])：

console.log(
    document.querySelectorAll('div[data-value]:not([data-value="0"])')
);

<div data-value="-1">0</div>
<div data-value="0">0</div>
<div data-value="1">1</div>
<div data-value="2">2</div>
<div>3</div>

这将选择所有具有数据值且其值不为0的div。