元素包含特定类的querySelectorAll
元素包含特定类的querySelectorAll
提问于 2018-08-15 16:28:18
我有几个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);但我知道这个错误
Uncaught :未能在“文档”上执行“querySelectorAll”：“.2018-8月-末端”不是有效的选择器。电话:1:10
那是为什么？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-15 16:29:54
类名) 不能以未转义的数字开头(在您的例子中是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>
或者，您可以使用 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这样的库中那样，在它前面抛一个反斜杠。)
Stack Overflow用户
发布于 2020-11-23 12:50:50
元素由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"]`)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51862676
复制相关文章
相似问题
腾讯云开发者
