为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

最新文章

热门文章