classList 对象(js新增的API)

最新推荐文章于 2025-10-11 20:31:56 发布
原创 最新推荐文章于 2025-10-11 20:31:56 发布 · 301 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#classList

HTML5新API里，每个DOM节点都有classList对象，它是DOM对象的属性。可通过其方法新增、删除、修改及判断节点上的CSS类，如add、remove等。还介绍了length、item等属性方法，不过要注意IE10以下不支持该对象。

classList 对象(js新增的API)
(DOM对象的属性,改属性指向对象)
在HTML5新API里，页面里的每个DOM节点上都有一个classList对象
可以使用classList对象里面的方法新增、删除、修改及判断节点上的CSS类

在HTML5新API里，页面里的每个DOM节点上都有一个classList对象
可以使用classList对象里面的方法新增、删除、修改及判断节点上的CSS类

classList对象里一些很有用的属性方法：
length 类名个数
item(index) 获取类名
add(class1,class2, …) 添加类
remove(class1,class2, …) 删除类
contains(class) 判断类
toggle(class) 反转类

注意：IE10以下不支持classList对象

按钮

一个块...
JavaScript WebAPI 系列七 移动端常见特效；classList属性；click延迟插件；Wwiper轮播图插件；视频插件；开发框架等，本地存储
m0_55170432的博客
03-30 270
1.0 移动端常见特效 1.1 案例：移动端轮播图 移动端轮播图功能和基本PC端一致。 可以自动播放图片 手指可以拖动播放轮播图 案例分析很多：可以去看笔记 window.addEventListener('load', function() { // alert(1); // 1. 获取元素 var focus = document.querySelector('.focus'); var ul = focus.children[0]; // 获得focus
从零开始的VUE+ArcGIS API for JS项目——底图切换工具（天地图，高德）
hfhf45_的博客
08-01 2359
实现自定义底图切换的工具，添加天地图，高德等地图作为底图。
JS classList API
南方有乔木的博客
03-11 397
JS classList API 介绍 简单来说，就是为了增加/切换/移除 class类新增的API。返回的是元素的类名。本质上是DOMTokenList。 DOMTokenList这种类型表示一组空间分隔的标记。通常由HTMLElement.classList, HTMLLinkElement.relList, HTMLA...
javascript系列之classList属性
StayAlive1887的博客
09-07 899
classList属性是一个只读的属性，它会返回一组HTML元素class属性值。它可以用于操作class属性列表。使用classList属性可以很便捷的访问元素的class属性值，这些class属性值通过className获得并使用空格分割。一个DOMTokenList表示一个元素的class属性值的内容。如果一个元素的class属性为空或没有设置，它会返回一个空的DOMTokenList，而且它的length属性会变为0。
Class类与反射API(一)
天涯芳草
06-09 631
Class与反射API
HTMLCollection元素对象中的classlist方法
m0_64288219的博客
06-24 477
element.classList是HTMLCollection对象中的一个属性方法 element.classList: 返回元素的类名，作为 DOMTokenList 对象。 使用这些方法我们就可以更好的通过类名来操作元素，实现不同效果。尤其是classList.toggle()切换类名方法，实现点击相同元素实现不同效果，可以用在todoLIst上。 这样我们就可以实现点击laji来回变换字体颜色，对todoList很有帮助...
H5新增属性classList
weixin_30357231的博客
04-10 182
H5新增属性classList h5中新增了一个classList，原生js可以通过它来判断获取dom节点有无某个class。 classList是html元素对象的成员，它的使用非常简单，比如 console.log(document.body.classList); 目前已知classList API有length,item,add,remove,toggle,contains len...
div 对象直接新增和删除styley样式
05-28
更推荐使用 `classList` API 管理预定义的 CSS 类： ```javascript // 添加类 div.classList.add('highlight', 'animated'); // 可同时添加多个类 // 移除类 div.classList.remove('highlight'); // 切换类（存在...
JavaScript:AbortController API 以及Promise.race优化
最新发布
KongMing06的博客
10-11 1491
AbortController 完全指南 AbortController 是浏览器和 Node.js 提供的异步操作控制接口，用于实现异步任务的协作式取消。它由控制器实例和信号对象组成，通过 signal 属性传递取消指令，abort() 方法触发终止操作。主要应用场景包括：1）取消 fetch 网络请求，节省带宽；2）终止定时器和延时任务；3）中断 Promise 链，避免无效计算；4）清理事件监听器，防止内存泄漏。关键特性是支持外部控制异步任务，同时区分取消错误和业务错误。每个 AbortControl
【每日一练】动态新增表格
qq_46580087的博客
03-02 534
别问我有什么，先说你要什么，再说你凭什么。
list类型放到html,使用HTML5里的classList操作CSS类
weixin_28677451的博客
06-09 174
在JavaScript和JavaScript工具库里征战多年，我经常有这样的遐想：什么时候现代浏览器里能提供一些辅助方法和类库，替代那些JavaScript工具库，比如jQuery，让我们用浏览器原生的方法替代它们。我知道浏览器必定会向这个方向改进，但这个进化过程不会很迅速，而且各种浏览器需要共同做这样的革新，火狐浏览器、谷歌浏览器、特别是IE，只有当这些主流浏览器都具备了这样的功能，我们的愿望才...
es6---classList 属性
muzidigbig的博客
10-21 770
之前我们要操作一个DOM元素的class属性，需要对这个DOM的class进行繁琐的循环判断，而现在HTML5为每个元素定义了classLlist属性，用于在元素中添加，移除及切换 CSS 类。该属性是 DOMTokenList 对象（一个只读的类数组对象），你可以通过DOMTokenList定义的方法对其进行修改。 classList 属性返回元素的类名，作为 DOMTokenList 对象。 classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。 语法：
ES6中set、map、DOM classList的基础用法
qq_65715980的博客
07-18 778
ES6中set、map、DOM classList的基础用法
ES6 Class语法介绍
Leayh
11-28 494
参考文章：ECMAScript 6 入门 概述 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功/能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 举个栗子： // ES5 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toStri...
classList的使用
weixin_48340600的博客
09-28 488
1、返回元素的类名（是一个数组） console.log(div.classList[1]); 2、添加元素类名，是在后面追加类名不会覆盖以前的类名 ，注意前面不需要加. div.classList.add('three'); 3、删除类名 div.classList.remove('one'); 4、切换类（有就去掉，没有就添加） document.body.classList.toggle('bg'); ...
深入学习js的classList
杜永康的博客
04-03 1万+
classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；
DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点
m0_73849466的博客
10-31 1301
DOM基础概念，classList属性提供的方法和属性的种类，DOM中节点的操作的方式，追加节点的方式和方法
js数组添加对象
热门推荐
weixin_42611825的博客
06-27 4万+
数组添加对象
classList详解，让你的js方便地操作DOM类
Preserve
01-16 3456
在此之前，jQuery的hasClass、addClass、removeClass我们已经再熟悉不过了，然而我们并不会在每一个项目中都会去使用jQuery或者Zepto，譬如在移动端的网页中，考虑到传说中的性能和静态资源的请求量等因素，我们通常会选择采用原生js，而对于元素的class操作。你首先想到的就是className，这位伙计完美地得到了包括ie6在内的所有古现代浏览器的支持，尽管它的功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值