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，请使用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。

Answer 2

使用选择器字符串'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](

要选择另外具有data-value属性但具有非0属性的<div>，请在选择器字符串中的初始div之后添加[data-value]：

document.querySelectorAll('div[data-value]: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>
<div>3</div>