项目中如果应用了常用的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非常相似,在一定程度上,也能够方便我们加深对这几个方法的理解。