JavaScript的classList属性是什么？如何操作类名？

let myDiv = document.getElementById('myDiv');
myDiv.classList.add('active'); // 添加一个类
myDiv.classList.add('highlight', 'selected'); // 同时添加多个类

let myDiv = document.getElementById('myDiv');
myDiv.classList.remove('active'); // 移除一个类
myDiv.classList.remove('highlight', 'selected'); // 同时移除多个类

let myButton = document.getElementById('myButton');
myButton.classList.toggle('is-open'); // 切换 'is-open' 类

// 强制添加 'is-active' 类（如果不存在就添加，如果存在也保持存在）
myButton.classList.toggle('is-active', true); 

// 强制移除 'is-active' 类（如果存在就移除，如果不存在也保持不存在）
myButton.classList.toggle('is-active', false); 

let myElement = document.getElementById('myElement');
if (myElement.classList.contains('error')) {
  console.log('元素有错误类');
}

let myItem = document.getElementById('myItem');
myItem.classList.replace('old-style', 'new-style'); // 将 'old-style' 替换为 'new-style'

let element = document.getElementById('myElement');
if (element.className.indexOf('active') === -1) { // 检查是否存在，防止重复
    element.className += ' active'; // 注意前面的空格
}

let element = document.getElementById('myElement');
element.classList.add('active'); // 完事，它会自动处理重复和空格

let card = document.querySelector('.product-card');

// 一次性给卡片添加多个状态类
card.classList.add('is-featured', 'has-discount', 'new-arrival');

// 之后，可能需要移除一些旧的状态
card.classList.remove('has-discount', 'old-version'); 

let menuItem = document.getElementById('nav-item');
let isActive = true; // 假设这是从某个状态管理或后端获取的布尔值

// 根据isActive的值来决定是添加还是移除 'active' 类
menuItem.classList.toggle('active', isActive); 

// 如果 isActive 为 true，则添加 'active'；如果为 false，则移除 'active'。

// 示例：点击按钮显示/隐藏一个侧边栏
const sidebar = document.getElementById('sidebar');
const toggleBtn = document.getElementById('toggle-sidebar-btn');

toggleBtn.addEventListener('click', () => {
    sidebar.classList.toggle('is-open'); // 切换 'is-open' 类来控制侧边栏的显示/隐藏和样式
});

// 假设这是表单验证函数的一部分
function validateInput(inputElement) {
    if (inputElement.value.trim() === '') {
        inputElement.classList.add('is-invalid'); // 添加错误样式
        inputElement.nextElementSibling.classList.add('show-error-message'); // 显示错误提示
        return false;
    } else {
        inputElement.classList.remove('is-invalid'); // 移除错误样式
        inputElement.nextElementSibling.classList.remove('show-error-message'); // 隐藏错误提示
        return true;
    }
}

// 示例：点击按钮触发一个元素淡入动画
const animatedBox = document.getElementById('animated-box');
const startAnimBtn = document.getElementById('start-animation');

startAnimBtn.addEventListener('click', () => {
    animatedBox.classList.add('fade-in'); // 添加 'fade-in' 类触发CSS动画
    // 动画结束后可能需要移除这个类，或者添加另一个类来重置/改变状态
    animatedBox.addEventListener('animationend', () => {
        // animatedBox.classList.remove('fade-in'); // 如果需要动画只播放一次
    }, { once: true }); // 确保事件监听器只触发一次
});

// 示例：切换网页主题
const body = document.body;
const themeToggle = document.getElementById('theme-toggle');

themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-theme'); // 切换 body 上的 'dark-theme' 类
    // 可以在这里保存用户偏好到 localStorage
    localStorage.setItem('theme', body.classList.contains('dark-theme') ? 'dark' : 'light');
});

// 页面加载时根据保存的偏好设置主题
document.addEventListener('DOMContentLoaded', () => {
    if (localStorage.getItem('theme') === 'dark') {
        body.classList.add('dark-theme');
    }
});