查找所有 class 个包含单词的名称，然后使用 JavaScript 编辑它们

Question

我想执行 JavaScript 以查找页面上的所有元素，这些元素在其 class 名称中包含一些文本并更改 class 名称。

例如，假设我有以下元素：

<div class="blue selector">...</div>
<div class="green selector">...</div>
<div class="red selector">...</div>
<div class="button">...</div>

假设我想找到所有在 class 名称中包含单词“selector”的元素，并将该元素的 class 名称更改为“picker”，这样我最终有：

<div class="picker">...</div>
<div class="picker">...</div>
<div class="picker">...</div>
<div class="button">...</div>

我可以在页面上执行什么 JavaScript 以获得此结果？

Answer 1

您可以使用 Substring matching attribute selectors 并更改元素的 class 名称。

document.querySelectorAll('div[class*="selector"]').forEach(node=> node.className = "picker");