querySelectorAll 元素包含特定类

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

我想选择仅包含2018-August-end我存储到变量中的 div，所以我尝试了这样的操作

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

document.querySelectorAll( "." + dataName);

但我收到这个错误

未捕获的 DOMException：无法在“文档”上执行“querySelectorAll”：“.2018-August-end”不是有效的选择器。在 :1:10

这是为什么 ？

谢谢

Answer 1

类名点 ( .)选择器不能以未转义的数字（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]表示法（对于 HTML）：

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

例子：

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

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

也可以用.符号转义第一个数字，但它很痛苦。（您不能像使用 jQuery 之类的某些库一样在它前面扔一个反斜杠。）