classlist

Benchmark created on September 25, 2012

Description

Preparation HTML

<div id="t" class="one two">
</div>

Setup

//对dom节点的class进行操作
    //对于不支持element.classList特性的浏览器进行模拟
    var getClassList = function (ele) {
    //    if (ele.classList) return ele.classList;
    
        var classList = {};
        var classes = ele.className.split(/\s+/);
        //索引下标赋值，成为类似数组对象
        for (var i = 0, l = classes.length; i < l; i++) {
            classList[i] = classes[i];
        }
        classList.length = classes[0] === '' ? 0 : classes.length;
    
        classList.update = function () {
            ele.className = [].join.call(this, ' ');
        }
    
        classList.contains = function (name, returnIndex) {
            for (var i = 0, l = this.length; i < l; i++) {
                if (this[i] === name) return returnIndex ? i : true;
            }
            return false;
        }
    
        classList.add = function (name) {
            if (!this.contains(name)) {
                this[this.length] = name;
                this.length++;
                this.update();
            }
        }
    
        classList.remove = function (name) {
            var index = this.contains(name, true);
            if (index !== false) {
                for (var l = this.length; index < l - 1; index++) {
                    this[index] = this[index + 1];
                }
                delete this[index];
                this.length--;
                this.update();
            }
        }
    
        classList.toggle = function (name) {
            if (this.contains(name)) {
                this.remove(name);
            } else {
                this.add(name);
            }
        }
    
        classList.toString = function () {
            var strArr = [];
            for (var i = 0, l = classList.length; i < l; i++) {
                strArr.push(classList[i]);
            }
            return strArr.join();
        }
    
        return classList;
    }

Test runner

var s = t.classList;
s.add('test');
s.remove('test');
s.toggle('fuck');
s.toggle('fuck');

var s = getClassList(t);
s.add('test');
s.remove('test');
s.toggle('fuck');
s.toggle('fuck');

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on September 25, 2012