js书写DOM元素class属性值操作

一、添加 Class（addClass）

使用 Element.classList.add() 方法添加一个或多个类名：

function addClass(element, className) {
  if (element.classList) {
    element.classList.add(className); // 现代浏览器
  } else {
    // 兼容 IE9 及以下
    element.className += ' ' + className;
  }
}

// 示例：为 ID 为 "myElement" 的元素添加 "active" 类
const element = document.getElementById('myElement');
addClass(element, 'active');

二、移除 Class（removeClass）

使用 Element.classList.remove() 方法移除一个或多个类名：

function removeClass(element, className) {
  if (element.classList) {
    element.classList.remove(className); // 现代浏览器
  } else {
    // 兼容 IE9 及以下
    element.className = element.className.replace(
      new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),
      ' '
    );
  }
}

// 示例：移除元素的 "active" 类
removeClass(element, 'active');

三、切换 Class（toggleClass）

使用 Element.classList.toggle() 方法切换类的存在状态：

function toggleClass(element, className) {
  if (element.classList) {
    element.classList.toggle(className); // 现代浏览器
  } else {
    // 兼容 IE9 及以下
    const classes = element.className.split(' ');
    const index = classes.indexOf(className);
    if (index >= 0) {
      classes.splice(index, 1); // 移除类
    } else {
      classes.push(className); // 添加类
    }
    element.className = classes.join(' ');
  }
}

// 示例：切换元素的 "active" 类
toggleClass(element, 'active');

四、检查 Class 是否存在（hasClass）

使用 Element.classList.contains() 方法检查元素是否包含特定类：

function hasClass(element, className) {
  if (element.classList) {
    return element.classList.contains(className); // 现代浏览器
  } else {
    // 兼容 IE9 及以下
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
  }
}

// 示例：检查元素是否有 "active" 类
if (hasClass(element, 'active')) {
  // 执行操作
}

五、批量操作多个元素

封装函数处理 NodeList（如查询结果）：

function forEachElement(selector, callback) {
  const elements = document.querySelectorAll(selector);
  Array.from(elements).forEach(callback);
}

// 示例：为所有 .item 元素添加 "highlight" 类
forEachElement('.item', (el) => {
  addClass(el, 'highlight');
});

六、兼容性说明

• 现代浏览器（Chrome、Firefox、Safari 10+、Edge）：直接使用 classList API。
• IE9 及以下：通过正则表达式或字符串操作兼容。

七、注意事项

1. 空格处理：classList 会自动处理多余空格，手动操作时需注意。
2. 性能：频繁操作建议批量处理后一次性更新 DOM。
3. 特殊字符：类名包含特殊字符（如 .、#）时需转义。

八、实际应用场景

// 1. 点击按钮切换元素类
document.querySelector('button').addEventListener('click', () => {
  const target = document.getElementById('target');
  toggleClass(target, 'active');
});

// 2. 滚动时为导航栏添加类
window.addEventListener('scroll', () => {
  const nav = document.querySelector('nav');
  if (window.scrollY > 100) {
    addClass(nav, 'scrolled');
  } else {
    removeClass(nav, 'scrolled');
  }
});