js dom class

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它表示文档的结构，并使程序能够更改内容、结构和样式。在JavaScript中，我们可以通过DOM API来操作网页的内容、结构和样式。

基础概念

DOM树：DOM将文档解析成一个由节点和对象组成的结构体系，这个结构体系就像一棵树，称为DOM树。
节点：DOM树中的每一个部分都是一个节点，包括元素节点、文本节点、属性节点等。
元素节点：HTML标签对应的节点就是元素节点，例如<div>、<p>等。

class在DOM中的作用

在HTML中，class属性用于定义元素的类名，这些类名可以被CSS样式表中的选择器引用，以应用特定的样式。在JavaScript中，我们可以通过DOM API来获取和修改元素的class属性。

JavaScript操作DOM class的方法

获取class：使用element.className可以获取元素的类名。
添加class：使用element.classList.add('class-name')可以向元素添加一个新的类名。
删除class：使用element.classList.remove('class-name')可以从元素中删除一个类名。
切换class：使用element.classList.toggle('class-name')可以在元素上添加或删除一个类名，取决于该类名是否存在。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Class Example</title>
<style>
  .red-text {
    color: red;
  }
</style>
</head>
<body>

<p id="myParagraph">Hello, World!</p>

<button onclick="addClass()">Add Class</button>
<button onclick="removeClass()">Remove Class</button>
<button onclick="toggleClass()">Toggle Class</button>

<script>
function addClass() {
  document.getElementById("myParagraph").classList.add("red-text");
}

function removeClass() {
  document.getElementById("myParagraph").classList.remove("red-text");
}

function toggleClass() {
  document.getElementById("myParagraph").classList.toggle("red-text");
}
</script>

</body>
</html>

在这个例子中，我们有三个按钮，分别用于给段落添加类名、删除类名和切换类名。当给段落添加red-text类名时，段落的文本颜色会变成红色。