开发者社区> 程序猿小卡> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【实用总结】DOM节点className操作

简介:
+关注继续查看

经常用到的小工具函数,每次用到都重写一遍,有点浪费体力,于是决定分阶段整理下,需要用到的时候就直接拷过来用了~

对于dom节点的className,常用操作不外乎增、删、查(改可以用增+删事先),由于代码比较简单,直接上源码+接口注释

/**
 * @description 给节点添加类
 * @param {DOMObject} node dom节点
 * @param {String} className 即将添加的类名
*/
function addClass(node, className){
    var addClassName = trim(className);
    var oriClassName = node.className;
    if(oriClassName.indexOf(addClassName)===-1){
        node.className = oriClassName+ ' ' +className;
    }
}

/**
 * @description 删除节点某个类
 * @param {DOMObject} node dom节点
 * @param {String} className 即将删除的类名
*/
function removeClass(node, className){
    var reg = new RegExp('\\b'+ trim(className) +'\\b', 'g');
    node.className = node.className.replace(reg, '');
}

/**
 * @description 判断节点是否具有某个类
 * @param {DOMObject} node dom节点
 * @param {String} className 查询的类名
 * @return {Boolean} true-有,false-没有
*/

function hasClass(node, className){
    return node.className.indexOf(trim(className))!==-1;
}

/**
 * @description 删除字符串首尾空格
 * @param {String} str 原始字符串
 * @return {String} 删除了首位空格后的字符串
 * @example trim('   hello world ') === 'hello world'
*/
function trim(str){
    return str.replace(/^\s+/, '').replace(/\s+$/, '');
}

其他如同时添加多个类、同时删除多个类等,实现原理类似,不赘述

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
DOM 节点的获取与操作
DOM 节点的获取与操作
0 0
DOM 精通了?请问 Node 和 Element 有何区别?
相信我们很多同学都经常会使用到 Node(节点)和 Element(节点)的概念,那么这两者到底有何区别,不知道有多少人能够答得上来这个问题?
0 0
41、Element 节点
Element节点对象对应网页的 HTML 元素。每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点)。
0 0
document节点的操作方法
document节点的操作方法
0 0
节点对象图与DOM树形图
节点对象图    DOM树形图   我的GitHub地址:https://github.com/heizemingjun 我的博客园地址:http://www.cnblogs.com/chenmingjun 我的蚂蚁笔记博客地址:http://blog.
549 0
DOM节点左右移动
闲来没事写了个小demo,原本是回答别人博问的,有人比我更快的给出了链接,想想半途而废也不好,就写完了,写个博文记录一下(效果是按照我自己来的,可能和最早别人问的不太一样,反正无关紧要啦) 直接上code: DOCTYPE html> ...
436 0
节点操作,节点属性的操作及DOM event事件
1. 节点操作 createElement(标签名) 创建一个指定名称的元素 someone.appendChild(new_node) 追加一个子节点(作为最后的子节点) someone.
728 0
DOM中的动态NodeList与静态NodeList
GitHub版本: https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md 副标题: 为何getElementsByTagName()比querySelectorAll()快100倍 昨天,我在雅虎的同事 Scott Schiller (斯科特·席勒, 同时也是SoundManager创造者) 发Twitter询问为何getElementsByTagName("a") 在所有浏览器上都比 querySelectorAll("a") 要快好多倍。
620 0
DOM中的previousSibling,nextSibling,firstChild,lastChild和parentNode节点学习
几个主要节点类型:     ELEMENT_NODE         = 1;    元素节点        TEXT_NODE              = 3;    文本节点     DOCUMENT_NODE     = 9;    文档节点在IE中会自动过滤掉空白文本节点   elem.
569 0
+关注
程序猿小卡
专注前端技术与架构
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载