Javascript querySelectorAll数据属性值不等于[重复]答案

【问题标题】：Javascript querySelectorAll data attribute value not equal to [duplicate]Javascript querySelectorAll数据属性值不等于[重复]
【发布时间】：2019-04-04 04:00:47
【问题描述】：

我的 HTML 标签有一个 [data-value] 属性，可以是 0、1、2 等等。

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

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

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

【问题讨论】：

标签： javascript html css-selectors

【解决方案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]）

要选择还具有data-value 属性但具有不是0 的<div>s，请在选择器字符串中的初始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>

【讨论】：

这个选择器也会返回没有数据值属性的标签，不是吗？
@mark uy：是的，但在 jQuery 中的工作方式相同。
@markuy 查看编辑，你只需要另一个[data-value]

【解决方案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>

这会选择所有具有 data-value 且其值不为 0 的 div。

【讨论】：

但是输出是0 0 1 2 3，这意味着它正在选择所有的div