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

最新推荐文章于 2022-10-15 19:37:16 发布
最新推荐文章于 2022-10-15 19:37:16 发布
阅读量2.7k 收藏
点赞数 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元/天 解锁文章
JavaScript中如何移除元素的类（Class）
TechSavant的博客
10-06 1991
要在JavaScript中移除元素的类（Class），我们可以使用Element对象的classList属性和remove方法。classList属性返回一个DOMTokenList对象，它表示元素的类列表，可以用于添加、删除和切换类。该方法接受一个类名作为参数，并返回一个布尔值，指示元素是否包含该类。方法从该元素的类列表中移除了一个类名为"myClass"的类。方法中传递多个参数，每个参数代表一个要移除的类名。另外，如果我们想要检查元素是否具有特定的类，可以使用。除了移除类和检查类的存在，
es6添加删除class_ES6中的Class
weixin_42528974的博客
12-30 221
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 482
静态属性与静态方法1. 不会被类实例所拥有的属性与方法 只是类自身拥有2. 只能通过类调用静态方法与普通方法重名，不会冲突static 关键字(静态方法)静态属性类名.属性名 = 属性值;1、静态属性的声明，应该在类外部，使用“类名.属性名”的方式声明。2、静态方法的调用，应该直接在类上调用，而不是在类的实例上调用。静态属性应用举例：//职业类class Profession{}class Cha...
javascript添加移除class
WeLoveSunFlower的专栏
07-08 2494
有时候需要点击某一个元素，改变元素样式，这时候可以先定义好class
继承的7种方式
hkduan的博客
01-02 350
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 1455
内部Javascript：直接写在html文件离script标签写在</body>里面 外部JavaScript：代码写在以.js结尾的文件里 语法：通过script标签，引入到html页面中。 内联式Javascript：代码写在标签内部 let 变量名（let不允许多次声明一个变量！！） let和var的区别： var声明： 可以先使用再声明（不合理） var声明的变量可以重复声明（不合理） 变量提升、全局变量、没有块级作用域等 通过单引号（''）、双引号（""）或反引号
ES6学习——set map数据结构 、 DOM classlist属性、创建对象 、Symbol应用
鹿蹊zz的博客
07-20 323
对象方法就是把对象中的属性，用匿名函数的形式编程方法(之前就有)。
es6删除数组元素或者对象元素
deep_zhuheihei的博客
06-18 3588
一，删除数组元素 let arr = [ {name:'黎明',id:21111}, {name:'王小二',id:1111}, {name:'大小二',id:3222} ] arr.splice(arr.findIndex(item => item.id === 3222), 1) arr.filter(obj=>obj.id!==3222) 二，删除对象元素 let arr = { name: '黎明', id: 1111, age:
24个解决实际问题的ES6代码片段(小结)
10-15
此方法可以接受一个可选的布尔值，控制是否添加或移除类。 ```javascript const toggleClass = (el, className) => el.classList.toggle(className); // Example toggleClass(document.querySelector('p.special'),...
ES6 Class
逍湘子
10-25 175
Js 在ES6 Version中引入了类的特性,关键字 class. (1)定义一个类 类的继承
es6添加删除class_ES6中的class的使用
weixin_30673943的博客
12-30 362
js的传统生成一个类的方法，需要定义一个构造函数，然后通过new的方式生成。functionCat() {this.name = 'kitty';this.color = 'yellow';}var cat = new Cat();js中只有对象，没有类。这样的写法和传统面向对象语言差异很大，很容易让新手感到困惑。一、定义类ES6添加了类，作为对象的模板。通过class来定义一个类：//定义类cl...
ES6之class--03取值、存值、表达式
jiaojsun的博客
02-07 844
1）取值函数（getter）和存值函数（setter） 与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。 class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value...
快速查找节点
ZhouHuiCSDN
06-17 1357
快速查找节点 1、通过 id 获取 document.getElementById('id') 2、通过 类名 获取 document.getElementsByClassName('类名') // 以 [ ] 形式返回 【注意】 对于类名，可能有多个，所以要获取到某一个需要通过下标去获取 3、通过 标签名 获取 document.getElementsByTagName('标签名') //以[ ]形式返回 4、通过 属性名 获取 document.getElementsBy
ES6、ES7、ES8学习指南
前端开发博客
11-10 602
关注公众号前端开发博客，回复“加群”加入我们一起学习，天天进步作者：CrazyCodeBoy链接：https://www.jianshu.com/p/1ae1dd4cdaa7概述ES...
【ES6】数组方法--查找元素find()、findIndex()
分享前端技术心得
10-15 7277
【代码】【ES6】数组方法--查找元素find()、findIndex()
24个ES6方法解决JS实际开发问题(小结)
10-15
这个方法检测元素是否在视口内可见，利用`getBoundingClientRect()` 获取元素相对于视口的位置，然后与视口尺寸比较。 8. **解构赋值** ES6允许我们从数组或对象中方便地提取值并赋值给变量，例如 `let [a, b] = ...
es6 class
whiteGay的博客
10-28 76
1.Es6引入了Class 类这个概念，作为对象的模板，通过class 关键字，可以定义类。 2.类和模块的内部，默认就是严格模式，所以不需要使用use strict 指定运行模式。 3.constr...
ES6中的类（Class）
weixin_52398420的博客
12-01 269
ES6中的类（Class） 类的基本语法 constructor方法 this与class（原型） 属性与方法添加到this上 属性与方法添加到类上 类的静态成员 类的基本语法 ES6提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已
ES6中常用数组方法总结
Misnice的博客
02-20 3683
1.Array.find() array.find()返回值是第一个符合条件的数组子项，找到符合条件的之后就不在继续遍历。 let arr = [{ name: '张三', age: 1 }, { name: '李四', age: 2 },{ name: '王五', age: 3 }] let findItem = arr.find(item => item.name === '张三') // 返回子项 console.log(findItem) // { name: '张三', age: 1
js动态添加、删除class
CSDN技术支持
09-16 2517
添加：document.getElementById("id").classList.add("className")； 或者 ：obj.className+=" "+'className'; 删除：document.getElementById("id").classList.remove("className")；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值