【实用总结】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+$/, '');
}

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

相关文章
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)