为DOM节点添加或者删除class
项目中如果应用了常用的javascript类库,多数情况下,这些已经封装好的类库,都会封装一个类似于addClass和removeClass的方法,以便于我们对DOM节点的class进行操作。
以jQuery为例:
$(dom).addClass("a").removeClass("b");
由于是封装好的方法,我们甚至都不需要检查需要操作的class在DOM中是否存在,用起来的感觉真的是不要太爽。
那么如果项目中没有使用任何类库呢,完全原生JavaScript,如何操作DOM节点的class呢?
以不做任何封装库为例,仅仅是封装两个简单的函数:
// 添加class
function addClass(kls, dom) {
var klsReg = new RegExp(kls, 'ig');
for (var i = 0; i<dom.length; i++){
var node = dom[i];
var klses = node.className;
if (!klsReg.test(klses)) {
node.className = klses + ' ' +kls
}
console.log(klses)
}
}
addClass("a", ops)
// 删除class
function removeClass(kls, dom) {
var klsReg = new RegExp(kls, 'ig');
for (var i = 0; i<dom.length; i++){
var node = dom[i];
var klses = node.className;
if (klsReg.test(klses)) {
node.className = node.className.replace(kls, '')
}
}
}
removeClass("red", ops)
其实也没什么可以疑惑的地方,也就是使用正则表达式对所需要操作的DOM节点进行判断,如果不存在class名为"a",则直接添加,否则忽略;如果是删除class的话,如果存在需要删除的class "b",则删除对应的b。
在封装个人类库中,这里需要注意的是,函数需要作为对象prototype的方法,并且返回该对象,以用于连缀的写法。
在html5的API中提供了一种新的写法,完全摆脱了正则表达式(意思是不在需要我们自己写正则表达式了):
var ops = document.querySelectorAll("p")
for (let p of ops) {
p.classList.add("blue");
p.classList.remove("red");
}
需要注意的是,classList这种API是不支持连缀写法的。
element.classList还有另外三个方法:
item ( Number )按集合中的索引返回类值。
toggle ( String [, force] )当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它。第二个参数的兼容性并不是特别好。
contains ( String )检查元素的类属性中是否存在指定的类值。
var ops = document.querySelectorAll("p")
for (let p of ops) {
p.addEventListener("click", function () {
this.classList.toggle("blue")
}, false)
}
其实仔细看这几个方法,会发现,与jQuery中的addClass, removeClass, toggleClass, contains非常相似,在一定程度上,也能够方便我们加深对这几个方法的理解。
为DOM节点添加或者删除class的更多相关文章
- Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...
- Openshift 节点添加和删除
1.节点添加 在新节点上编辑yum源/etc/yum.repo.d/ocp.repo /etc/hosts在主和节点上都加上相应信息 编辑host文件,加入 [OSEv3:children] mast ...
- MongoDB 副本集节点添加与删除
replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点 查看复制打印 rep ...
- JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作
html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...
- jQuery的节点添加、删除、替换等操作
//几种添加节点的方法 //$("p").append("<b>你好吗?</b>");//向p元素中追加<b> //$(&q ...
- ztree-编辑节点(树节点添加,删除,修改)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
- js给节点添加或删除类名
为 <div> 元素添加 class: document.getElementById(“myDIV”).classList.add(“mystyle”); 为 <div> 元 ...
- 将HTML字符转换为DOM节点并动态添加到文档中
将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...
- 用JS添加和删除class类名
下面介绍一下如何给一个节点添加和删除class名 添加:节点.classList.add("类名"): 删除:节点.classList.remove("类名") ...
随机推荐
- LOJ 2586 「APIO2018」选圆圈——KD树
题目:https://loj.ac/problem/2586 只会 19 分的暴力. y 都相等,仍然按直径从大到小做.如果当前圆没有被删除,那么用线段树把 [ x-r , x+r ] 都打上它的标记 ...
- struts2+dojo实现datagrid动态刷新
实现一个普通的数据库查询功能,参考了这个帖子:http://stackoverflow.com/questions/5499453/how-to-refresh-datagrid 需要注意的是动态创建 ...
- SQL Server Profiler 怎么创建trace来收集sql log(.trc文件)
1. 先安装SQL Server 2008 R2或其他版本的数据库. 2. 打开profiler, 选择新建一个trace,连接到要监控的SQL Server数据库实例. 打开 SQL Serve ...
- jQuery 筛选器 链式编程操作
$('#i1').next() 下一个标签$('#i1').nextAll() 兄弟标签中,所有下一个标签$('#i1').nextUntil('#ii1') 兄弟标签中,从下一个标签到id为ii1的 ...
- Azure Storage (26) HTML5播放Azure Storage MP4问题
<Windows Azure Platform 系列文章目录> 问题:客户描述说在Azure Storage上的MP4视频无法在线播放,只能看到黑屏的视频,有声音但是没有图像 问题排查:H ...
- locaton.href传参数
location.href = location.href.substring(0,location.href.lastIndexOf('?'))+'?typeId=' + fid + '&p ...
- vue 用v-if 或者 v-show 渲染dom时,初次加载闪烁的问题
js 是等dom加载完成后操作的, 所以加载的时候,会闪烁. 此时,你会惊奇的发现,原来闪烁的dom或者文本 不闪烁了.
- JVM 专题
未完待续>>> JVM - 整体结构 摘抄自:<分布式java应用基础与实践>-第三章 JVM - 内存 对上图各部分的概要解释: JVM - GC 详情参考: http ...
- bzoj4948: World Final2017 A
求简单多边形内的最长线段长度 显然存在一组最优解,使其所在直线经过多边形的两个端点,枚举这两个端点,求出直线和多边形的有效交点,从而得出直线有哪些部分在多边形内(含边界). 由于多边形的一些边可能与直 ...
- ASP.NET MVC如何在Action中返回脚本并执行
我们都知道在aspx页面的cs文件中只要用Respos.Write("<script></scritp>")就可以在前台执行脚本 但是在MVC中就不一样了, ...