Select 每个 class 以 Pure javaScript 中的给定字符串开头

Question

我想 select 任何拥有 class 的元素以给定的字符串开头，这里是一个示例，其中 classes 以 fi-

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

我想在纯 JavaScript 中执行此操作（没有 jQuery）。

我已经阅读了以下问题：

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

Answer 1

您可以使用 querySelectorAll 并在 jQuery 中指定选择器，例如：

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

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

Answer 2

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

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

现场演示

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

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

Answer 3

使用document.querySelectorAll和通配符select或。这里 class^ 表示此查询 select 或将 select 任何具有 class 以 fi

开头的元素

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

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

您可以通过传递 tag 名称

将其微调为仅 select i 标签

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 4

[attr^=value] Represents elements with an attribute name of attr whose value is prefixed (preceded) by value

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

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

Select each class starting with a given string in Pure javaScript