ES6 获取元素class值 进行单元性移除

最新推荐文章于 2023-02-17 15:29:59 发布
最新推荐文章于 2023-02-17 15:29:59 发布
阅读量2.6k 收藏
点赞数 1
分类专栏： 前端开发 文章标签： js ES6 数组移除 class值移除 数组比较移除
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37838171/article/details/80774753
版权
本文介绍如何在JavaScript中，特别是使用ES6语法，有效地获取元素的class值并进行单元性移除。通过示例代码展示了如何操作DOM元素的class列表，实现精准的class移除功能。
摘要由CSDN通过智能技术生成
一、ES6 数组单元性移除

菜鸟小编在工作中进行数组进行子项移除的时候,发现ES6暂时未提供方法进行单元性移除,
故尝试着写一个方法进行完成，不足之处 请大家指点，废话不多说

直接贴代码：

代码示意图:


完整代码:

最低0.47元/天 解锁文章
一个成长在IT的码奴
关注
专栏目录
es6添加删除class_ES6中的Class
weixin_42528974的博客
12-30 211
ES6的class语法 不是一种新的“类”机制，class基本上只是现有 [[prototype]]链(委托)机制的语法糖。内容代码如下：// widget：部件，button：按钮class Widget {constructor(width,height) {this.width = width || 50;this.height = height || 50;this.$elem = nul...
es6添加删除class_ES6 class（基本语法+方法）
weixin_31028871的博客
12-30 471
静态属性与静态方法1. 不会被类实例所拥有的属性与方法 只是类自身拥有2. 只能通过类调用静态方法与普通方法重名，不会冲突static 关键字(静态方法)静态属性类名.属性名 = 属性值;1、静态属性的声明，应该在类外部，使用“类名.属性名”的方式声明。2、静态方法的调用，应该直接在类上调用，而不是在类的实例上调用。静态属性应用举例：//职业类class Profession{}class Cha...
javascript添加移除class
WeLoveSunFlower的专栏
07-08 2459
有时候需要点击某一个元素，改变元素样式，这时候可以先定义好class
继承的7种方式
hkduan的博客
01-02 337
js的继承几种方式： 1.es6的最简单，关键字extends 、constructor、super() // es6继承 class Animal { //构造函数，里面写上对象的属性 constructor(props) { this.name = props.name || 'Unknown'; } //方法写在后面 eat() {//父类共有的方法 console.log(this.name + " will eat pests."
Web API(ES6新增JS语法、获取元素修改属性、监听事件）
m0_59592734的博客
04-29 1430
内部Javascript：直接写在html文件离script标签写在</body>里面 外部JavaScript：代码写在以.js结尾的文件里 语法：通过script标签，引入到html页面中。 内联式Javascript：代码写在标签内部 let 变量名（let不允许多次声明一个变量！！） let和var的区别： var声明： 可以先使用再声明（不合理） var声明的变量可以重复声明（不合理） 变量提升、全局变量、没有块级作用域等 通过单引号（''）、双引号（""）或反引号
24个解决实际问题的ES6代码片段(小结)
10-15
此方法可以接受一个可选的布尔值，控制是否添加或移除类。 ```javascript const toggleClass = (el, className) => el.classList.toggle(className); // Example toggleClass(document.querySelector('p.special'),...
24个ES6方法解决JS实际开发问题(小结)
10-15
这个方法检测元素是否在视口内可见，利用`getBoundingClientRect()` 获取元素相对于视口的位置，然后与视口尺寸比较。 8. **解构赋值** ES6允许我们从数组或对象中方便地提取值并赋值给变量，例如 `let [a, b] = ...
【ES6知识点】
qq_48687155的博客
08-20 846
ES6知识点
es6添加删除class_ES6中的class的使用
weixin_30673943的博客
12-30 348
js的传统生成一个类的方法，需要定义一个构造函数，然后通过new的方式生成。functionCat() {this.name = 'kitty';this.color = 'yellow';}var cat = new Cat();js中只有对象，没有类。这样的写法和传统面向对象语言差异很大，很容易让新手感到困惑。一、定义类ES6添加了类，作为对象的模板。通过class来定义一个类：//定义类cl...
ES6之class--03取值、存值、表达式
jiaojsun的博客
02-07 831
1）取值函数（getter）和存值函数（setter） 与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。 class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value...
快速查找节点
ZhouHuiCSDN
06-17 1317
快速查找节点 1、通过 id 获取 document.getElementById('id') 2、通过 类名 获取 document.getElementsByClassName('类名') // 以 [ ] 形式返回 【注意】 对于类名，可能有多个，所以要获取到某一个需要通过下标去获取 3、通过 标签名 获取 document.getElementsByTagName('标签名') //以[ ]形式返回 4、通过 属性名 获取 document.getElementsBy
ES6、ES7、ES8学习指南
前端开发博客
11-10 584
关注公众号前端开发博客，回复“加群”加入我们一起学习，天天进步作者：CrazyCodeBoy链接：https://www.jianshu.com/p/1ae1dd4cdaa7概述ES...
ES6 Class类 事件的注册与销毁
最新发布
^Being^
02-17 1252
ES6 中使用 Class 语法糖，处理事件监听器的注册(addEventListener)和销毁(removeEventListener)时，其中遇到的、或者说需要注意的一些问题(如：注册事件无法销毁)及解决方案。
js动态添加、删除class
CSDN技术支持
09-16 2490
添加：document.getElementById("id").classList.add("className")； 或者 ：obj.className+=" "+'className'; 删除：document.getElementById("id").classList.remove("className")；
Class 的基本语法
Geordies的博客
02-09 727
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
Javascripts获取元素操作方式（ES5语法和ES6语法获取单个/多个操作元素）
qq_52367032的博客
10-23 1037
Javascripts获取元素操作方式（ES5语法和ES6语法获取单个/多个操作元素）
es6删除目标对象的某一个属性
热门推荐
木槿之夏
12-27 2万+
const person = { name: 'jazz', gender: 'male', age: 24 }; 删除目标对象的某一个属性 方法1： const personUnkonwAge = (({name, gender}) =&gt; ({name,gender}))(person) console.log(personUnkonwAge) console.log(pers...
删除数组中指定元素(ES6方法)
Zykon
08-28 5470
原数据 let arr =[{id:1},{id:2},{id:3},{id:8}] 待删除数据 obj = {id:1} 在原数据上删除数据 arr.splice(arr.findIndex(item => item.id === obj.id), 1) // [{id:2},{id:3},{id:8}] findIndex() 方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值