javascript - 如何使用 querySelector 从 SVG 中选择看起来像 id 的名称？

Question

目前我有 id 名称为的元素CDT-B2-1, CDT-B2-2, and CDT-B2-3

我想使用 document.querySelector() 选择这 3 个

PS我使用这个代码document.querySelector(`[id="CDT-B2-*"]`)，但它没有工作。

PPS 元素 id 名称是动态的，因此并非总是如此，CDT-B2-1, CDT-B2-2, and CDT-B2-3但有时可以CDT-B2-10, CDT-B2-20, and CDT-B2-27

Answer 1

将您的选择器代码更改为

let elems = document.querySelectorAll("[id^='CDT-B2-']");

从匹配属性选择器的子字符串：

[att^=val]

表示具有 att 属性的元素，其值以前缀“val”开头。如果 "val" 是空字符串，则选择器不代表任何内容。

文档还包括选择器语法以查找具有特定后缀[att$=val]或子字符串值的属性[att*=val]。

Answer 2

要选择以某个开头的元素，id您可以使用[id^="CDT-B2-"]. 此外，您需要使用querySelectorAll而不是querySelector ，因为它将返回所有元素而不是它找到的第一个元素。

查看MDN以了解所有可能的属性选择器。

const elements = document.querySelectorAll('[id^="CDT-B2-"]');

console.log(elements);

<div id="CDT-B2-1"></div>
<div id="CDT-B2-2"></div>
<div id="CDT-B2-3"></div>