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' 'Document'：'.2018-August-end'不是有效的选择器。在：1：10

那是为什么？

谢谢

Answer 1

类名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

由tagName组成的元素，如下所示：

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

带有tagName的元素，也带有类：

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]`)

按数据的元素，并忽略具有特定类的元素：

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

元素的querySelectorAll包含特定类

2 个答案: