更改HTML中的类名

Question

所以我正在审查我的朋友编写的一个网站的代码，我想知道是否有一种方法可以将具有特定类名的所有元素更改为另一个使用Tampermonkey的元素。

下面是我目前的代码：

// @name         ClassName Change
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Change class names for website review
// @author       Me
// @match        https://example.com/*
// @grant        none
// @include      https://example.com/*
// ==/UserScript==


const change = document.getElementsByClassName("svg-sprite-vs top-point-empty");

change.className = "svg-sprite-vs top-point-full";

在工具栏上出现了"tampermonkey running“徽章，这意味着脚本正在运行，但是类名没有改变，网站的外观也没有改变。

有什么建议吗？

Answer 1

多个类可以应用于多个元素，并且可以有多个元素共享该类。

你会想要在循环中遍历它们，这样你就可以到达所有的地方。

此外，您还可以使用Element.classList，这是一种很好的方法，可以在不影响其他类的情况下更改您想要的内容。

document.querySelectorAll('.svg-sprite-vs.top-point-empty').forEach(elem => {
   elem.classList.remove('top-point-empty');
   elem.classList.add('top-point-full');
});

如果您想覆盖这些类，只需执行elem.setAttribute('class', 'svg-sprite-vs top-point-full')