仅使用JavaScript将删除类添加到DOM元素,以及这两种方法中的最佳方法

Question

使用JavaScript将类添加到DOM元素的好方法是什么？并删除.

我发现以下代码添加:

1:

Element.prototype.addClassName = function (cls) {
    if (!this.hasClassName(cls)) {
        this.className = [this.className, cls].join(" ");
    }
};

2:

document.querySelector(element).classList.add(cls)

它们似乎都适合我.它们之间有什么区别,哪个最好？

Answer 1

1.如果您被单词原型所感动,您可能需要检查MDN Docs - 继承和原型链.

2.您提到的第一个代码是向元素添加类的常规跨浏览器方式.
取而代之的是一个函数声明,其添加为方法的元素的原型-所以,当你通过它查询一个元素id(好醇'的JavaScript),你可以简单地调用元素本身的方法.

3.您发布的第二个代码是根据新的DOM规范.W3链接.它仅适用于那些实现DOM Level 4规范的浏览器.它不适用于旧浏览器.

这是不同的.

对于最好的方法,本机方法总是最好和最快的.
所以对于支持的浏览器,clasList第二个应该是最好的.根据我的观点,在事情(草稿)尚未最终确定之前,您可能需要考虑一种跨浏览器工作的方法,并且兼容JavaScript(ECMA-3)和支持的DOM Spec.

一个简单的想法应该是更改className所有新旧浏览器中可访问的属性,并将其class作为字符串附加到其中:

var el = document.getElementById(id);
el.className = el.className + " " + cls; 
// mind the space while concatening

当然,您可以添加验证方法,例如regex在添加和删除时使用修剪空间.

顺便说一下,我得到了你发布的第一个代码的全部代码:

Element.prototype.hasClassName = function(name) {
    return new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)").test(this.className);
};

Element.prototype.addClassName = function(name) {
    if (!this.hasClassName(name)) {
        this.className = this.className ? [this.className, name].join(' ') : name;
    }
};

Element.prototype.removeClassName = function(name) {
    if (this.hasClassName(name)) {
        var c = this.className;
        this.className = c.replace(new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)", "g"), "");
    }
};

Answer 2

这是jquery的代码.

改编版的jQuery的addClass
和jQuery的removeClass

如果你看一下jQuery源代码,他们就是这样做的.这是从它们改编而来,但几乎完全是由jQuery编写的,并且是它们的代码.我不是原作者,只是展示如何使用一件作品而不是整个图书馆.

jQuery的addClass:

//This code is jQuery's
function AddClassToElement(elem,value){
 var rspaces = /\s+/;
 var classNames = (value || "").split( rspaces );
 var className = " " + elem.className + " ",
 setClass = elem.className;
 for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
  if ( className.indexOf( " " + classNames[c] + " " ) < 0 ) {
   setClass += " " + classNames[c];
  }
 }
 elem.className = setClass.replace(/^\s+|\s+$/g,'');//trim
}

jQuery的removeClass:

//This code is jQuery's
function RemoveClassFromElement(elem,value){
 var rspaces = /\s+/;
 var rclass = /[\n\t]/g
 var classNames = (value || "").split( rspaces );
 var className = (" " + elem.className + " ").replace(rclass, " ");
 for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
  className = className.replace(" " + classNames[c] + " ", " ");
 }
 elem.className = className.replace(/^\s+|\s+$/g,'');//trim
}

这是一个工作小提琴:http://jsfiddle.net/C5dvL/