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

Question

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

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

我想用纯JavaScript（没有jQuery）做到这一点。

我已经阅读了以下问题：

• 选择以jquery开头的类
• 如何通过类名获取所有元素？
• jQuery选择第一个字母？

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

Answer 1

您可以使用querySelectorAll并指定选择器在jQuery中的操作方式，例如：

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

而且，如果您不想匹配以filike 开头的其他类，fish而只是将它们与破折号匹配，那么您就知道这与jQuery：完全一样'[class^="fi-"]'。

Answer 2

使用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>