代替 jQuery 的工具库：Custom Elements 的 classList 用法实践-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对 DOM 元素进行操作。而很多时候，我们会使用 jQuery 这样的工具库来方便地操作 DOM 元素。然而，在一些新的标准中，也有一些新的 API 可以帮助我们处理 DOM 元素，其中就包括 Custom Elements 的 classList 用法。本文将介绍 classList 的详细用法，同时也会进行一些实践操作，帮助大家更好地掌握这个 API。

什么是 classList？

classList 是一个只读的 DOMTokenList 对象，它包含了元素的类名。classList 允许我们通过 add、remove、toggle 和 contains 方法来修改元素的类名，进而影响样式。这个 API 支持多个类名操作，能让我们更方便地操作 DOM 元素。

classList 主要方法

add

add 方法用于向元素添加一个类名。如果类名已经存在，那么该方法什么也不会做。

<div id="example"></div>

const example = document.querySelector('#example');
example.classList.add('hello');

上述代码会在 example 元素中添加一个类名为 hello。

remove

remove 方法用于从元素中移除一个类名。如果类名不存在，该方法什么也不会做。

example.classList.remove('hello');

上述代码会将 example 元素中的类名 hello 移除。

toggle

toggle 方法用于切换元素的类名。如果元素中存在该类名，则移除该类名；如果不存在，则添加该类名。

example.classList.toggle('hello');

如果 example 元素中存在 hello 类名，则该代码会将 hello 类名从元素中移除。如果不存在，则会添加 hello 类名。

contains

contains 方法用于检查元素是否包含指定类名。返回值为布尔类型。

if (example.classList.contains('hello')) {
  console.log('包含 hello 类名');
}

实践操作

现在我们已经了解了 classList 的基本方法，请看以下实践操作。

实践一：切换类名

在很多场景下，我们需要根据一些条件来切换元素的类名，例如实现一个带有查看更多/隐藏的按钮。下面是一个实现例子：

<div id="content">...</div>
<button id="button">查看更多</button>

// javascriptcn.com 代码示例
const content = document.querySelector('#content');
const button = document.querySelector('#button');

button.addEventListener('click', () => {
  // 添加/移除类名 hidden
  content.classList.toggle('hidden');

  // 切换按钮文本
  button.textContent = content.classList.contains('hidden')
    ? '查看更多'
    : '隐藏';
});

上述代码会在点击按钮时，切换 content 元素的类名，从而实现显示/隐藏的效果，并同时切换按钮的文本。

实践二：动态添加类名

有时候，我们可能需要在元素上动态添加一些类名，例如实现一个菜单导航的高亮效果。下面是一个实现例子：

<ul>
  <li data-id="home">首页</li>
  <li data-id="about">关于我们</li>
  <li data-id="contact">联系我们</li>
</ul>

// javascriptcn.com 代码示例
const lis = document.querySelectorAll('li');

for (const li of lis) {
  li.addEventListener('click', () => {
    for (const li of lis) {
      li.classList.remove('active');
    }
    li.classList.add('active');
  });
}

上述代码会在点击 li 元素时，动态地添加 active 类名，并移除其他 li 元素的 active 类名，实现菜单导航的高亮效果。

总结

在本文中，我们介绍了 classList 的基本用法，并进行了实践操作，希望能帮助大家更好地掌握这个 API。虽然 jQuery 可以帮助我们快速地操作 DOM 元素，但是我们也需要关注一些新的标准，去学习使用其提供的 API，以便更好地开发出高质量的前端项目。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6522766b95b1f8cacd9f1c63