【实用总结】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节点className操作相关推荐

js添加多个子节点_JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作.分享给大家供大家参考,具体如下: www.jb51.net JS节点插入 function showinsert(){ //添加子节 ...
JS对DOM节点的操作--增加节点，删除节点
(1):DOM :DOM文档树的全称是document object model ,也就是文档对象模型,在js中,把整页面当成一个dom树,而我们可以对每一个节点都可以进行相应的操作,比如创建一个节点 ...
【Vue已解决】当点击某个遍历出来的元素并修改背景颜色且唯一，通过ref获取dom节点再操作
目录解决问题的过程问题描述做的一些尝试解决方法(ref) 代码片解决问题的过程该小文本着记录在工作中学习和解决问题的思路,并非最佳方式. 问题描述在使用 Vue+ElementUI 开发 ...
DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点
1. 什么是DOM: Document Object Modei :文档对象模型 2.DOM核心:document对象 3.DOM作用: 可以访问和操作xtml和HTML文档中的标签,标签的属性, ...
vue里dom节点和window对象
一.window对象首先window对象是浏览器下的默认对象,也就是全局对象,在没有明确指向的时候this指向window.即使切换路由,window对象里面的属性和方法依旧会保留.因此可以在控制栏 ...
第四章 DOM节点操作
1.什么是DOM: DOM(document object model)文档对象模型,把每一个元素看做是一个节点,然后对节点进行增删改查的操作 2.DOM的分类: (1)Core Dom:可以对ht ...
java操作dom节点的添加_java操作DOM节点的添加，删除，修改
java操作DOM节点的添加,删除,修改下面我们开始对此xml添加,删除,修改:方法一 import java.io.File; import java.io.IOException; import ...
原生JS操作DOM节点代码
转载自:https://www.cnblogs.com/daysme/p/6538588.html DOM节点操作函数总结 .parentNode 获取父级元素移除元素 function remov ...
Python+selenium 自动化-调用dom节点的click()监听事件，强力操作节点，穿透元素进行点击，节点被遮挡不可点击解决方法
非常简单!只需要两步: 第一步,我先获取 dom 节点. 第二步,然后通过 driver.execute_script() 方法调用 dom 节点的 click() 监听事件. a = driver. ...

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

【实用总结】DOM节点className操作相关推荐

最新文章

热门文章