The classList JS Element allows for manipulation of element’s class content attribute as a set of whitespace-separated tokens through a DOMTokenList object.
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
tokenlist.remove("myclass2");
document.querySelector("output").innerHTML = tokenlist;
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
tokenlist.add("myclass4");
document.querySelector("output").innerHTML = tokenlist;
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
tokenlist.toggle("myclass2");
tokenlist.toggle("myclass4");
document.querySelector("output").innerHTML = tokenlist;
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
tokenlist.replace("myclass2", "myclass4");
document.querySelector("output").innerHTML = tokenlist;
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
document.querySelector("output").innerHTML = tokenlist.contains("myclass2");
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
let output = "";
for(let i = 0; i < tokenlist.length; ++i)
{
output += tokenlist.item(i) + "<br>";
}
document.querySelector("output").innerHTML = output;
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
let output = "";
for(let i = 0; i < tokenlist.length; ++i)
{
output += tokenlist[i] + "<br>";
}
document.querySelector("output").innerHTML = output;
</script>
</body>
</html>