元素的 querySelectorAll 包含特定 class

Question

我有几个包含两个类的 div，例如：

<div class="dateNumbers"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>

其中某个月份的 {{month.year + '-' + month.monthName + '-' + 'end'}} 是 2018-August-end

我想要 select 仅包含 2018-August-end 的 div，我将其存储到一个变量中，所以我尝试了类似这样的操作

var dataName = `2018-August-end`; // this is dynamic but for this example I have it static

document.querySelectorAll( "." + dataName);

但是我收到这个错误

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.2018-August-end' is not a valid selector. at :1:10

这是为什么？

谢谢

Answer 1

Class 名称 dot (.) selectors 不能以未转义的数字开头（2，在您的情况下）。

最简单的解决方案是只用字母开头，我强烈推荐：

示例：

const datePart = "x2018-August-end";
console.log(
  document.querySelectorAll(".\" + datePart).length
);

<div class="dateNumbers"></div>
<div class="dateNumbers x2018-August-end"></div>
<div class="dateNumbers x2018-August-end"></div>
<div class="dateNumbers x2018-August-end"></div>

或者，您可以使用功能相同的 [class~=value] notation（对于 HTML）：

document.querySelectorAll("[class~='" + datePart + "']")

示例：

const datePart = "2018-August-end";
console.log(
  document.querySelectorAll("[class~='" + datePart + "']").length
);

<div class="dateNumbers"></div>
<div class="dateNumbers 2018-August-end"></div>
<div class="dateNumbers 2018-August-end"></div>
<div class="dateNumbers 2018-August-end"></div>

也可以用.符号转义第一个数字，但是痛苦。（你不能像 jQuery 这样的库那样在它前面加一个反斜杠。）

Answer 2

像这样的标签名称元素：

document.querySelectorAll(`svg,b,u,i,span,a,path,circle,rect,polygon,ellipse`)

元素由 tagName 和 class:

document.querySelectorAll(`svg,b,u,i,span,a,path,circle,rect,polygon,ellipse,div[class~="background"]`)

元素由 svg 内部渐变停止：

document.querySelectorAll(`svg,defs,stop`)

数据或数据集的元素：

document.querySelectorAll(`[data-target]`)

数据元素并忽略具有特定 class 的元素：

document.querySelectorAll(`[data-target]:not([class*="background"]`)

元素的 querySelectorAll 包含特定 class

querySelectorAll for element contain specific class

javascript

dom

selectors-api