在Pure javaScript [duplicate]中选择以给定字符串开头的每个类

Question

这个问题在这里已有答案：

• querySelector, wildcard element match? 5个答案

我想选择任何拥有一个以给定字符串开头的类的元素，这里是一个以fi-开头的类的例子

<i class="fi-xmsl-user"></i>
<i class="fi-stsl-map"></i>

我想用纯JavaScript（没有jQuery）来做这件事。

我已经阅读了以下问题：

• select class starting with jquery
• How to get all elements by class name?
• Jquery select first letter?

最后一个很有趣，但我不喜欢循环遍历每个元素以检查类的想法。

Answer 1

使用document.querySelectorAll和外卡选择器。这里class^意味着这个查询选择器将选择任何具有以fi开头的类的元素

let k = document.querySelectorAll('[class^="fi"]');
console.log(k)

<i class="fi-xmsl-user"></i>
<i class="fi-stsl-map"></i>

您可以通过传递i名称对其进行微调以仅选择tag标记

let k = document.querySelectorAll('i[class^="fi"]');
console.log(k.length)

<i class="fi-xmsl-user"></i>
<i class="fi-stsl-map"></i>
<div class="fi-stsl-map"></div>

Answer 2

您可以使用querySelectorAll并指定选择器如何在jQuery中执行：

document.querySelectorAll('[class^="fi"]')

如果你不想匹配以fi开头的其他类，例如fish，只是将它们与破折号匹配，那么你就知道这个交易与jQuery完全相同：'[class^="fi-"]'。

Answer 3

你可以使用Attribute Selectors 和querySelectorAll()

[attr^=value]表示属性名称为attr的元素，其值以值为前缀（前置）

let i = document.querySelectorAll('[class^=fi]')
console.log([...i])

<i class="fi-xmsl-user"></i>
<i class="fi-stsl-map"></i>

Answer 4

您可以将.querySelectorAll与^一起使用到选择器中

document.querySelectorAll('[class^="fi-"]')

现场演示

console.log(document.querySelectorAll('[class^="fi-"]'))

<div class="fi-one"></div>
<div class="fi-two"></div>