当浏览器本身没有实现它时，创建我自己的classList对象

Question

我有使用classList对象添加和删除类的JavaScript代码。 代码已经正常运行，直到我收到有关它的投诉，因为它在Opera和IE8中不起作用。

我不想使用任何框架或代码库。我想将我必须在程序中更改的代码减少到最大值，因此我想创建自己的classList对象并将其添加到节点对象中。我已经有了这段代码：

if (typeof(document.createElement('input').classList) == 'undefined') {
    HTMLElement.prototype.classList = new function () {
        this.add = function (addClass) {
            this.className += addClass;
        }
    }
}

显然，这不起作用。 问题是：我无法像这样访问此对象的HTMLElement.className。我怎么能做到这一点？如何使此对象与原始对象类似或完全相同？

Answer 1

Mozilla在这里列出了一个classList shim：

http://developer.mozilla.org/en/DOM/element.classList

代码中有相当多的内容，但看起来就像你追求的那样。

Answer 2

您可以创建一个返回所需值的辅助函数，而不是扩展原型：

classList = function ( elem ) {
    return elem.className.replace(/\s+/g,' ').split(' ');
};

然后，您只需拨打elem.classList，而不是调用classList(elem)，这意味着它与原始版本完全不同，但会返回相同的数据。