C'è un modo per aggiungere / rimuovere più classi in una singola istruzione con classList?

Finora devo fare questo:

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

Mentre questo è fattibile in jQuery, in questo modo

$(elem).addClass("first second third");

Vorrei sapere se esiste un modo nativo per aggiungere o rimuovere.

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

è uguale

elem.classList.add("first","second","third");

Il nuovo operatore di diffusione semplifica ulteriormente l'applicazione di più classi CSS come array:

const list = ['first', 'second', 'third'];
element.classList.add(...list);

La classListproprietà garantisce che le classi duplicate non vengano aggiunte inutilmente all'elemento. Al fine di mantenere questa funzionalità, se non ti piace la versione longhand o versione jQuery, suggerirei aggiungendo una addManyfunzione ed removeManyalla DOMTokenList(il tipo di classList):

DOMTokenList.prototype.addMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.add(array[i]);
    }
}

DOMTokenList.prototype.removeMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.remove(array[i]);
    }
}

Questi sarebbero quindi utilizzabili in questo modo:

elem.classList.addMany("first second third");
elem.classList.removeMany("first third");

Aggiornare

Secondo i tuoi commenti, se desideri scrivere un metodo personalizzato solo se questi non sono definiti, prova quanto segue:

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}

Dal momento che il add()metodo dal classListappena permette di passare argomenti separati e non un singolo array, è necessario invocare add()usando applicare. Per il primo argomento dovrai passare il classListriferimento dallo stesso nodo DOM e come secondo argomento l'array di classi che desideri aggiungere:

element.classList.add.apply(
  element.classList,
  ['class-0', 'class-1', 'class-2']
);

Per aggiungere classe a un elemento

document.querySelector(elem).className+=' first second third';

AGGIORNARE:

Rimuovi una classe

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");

Le versioni più recenti delle specifiche DOMTokenList consentono più argomenti add()e remove(), oltre a un secondo argomento, toggle()per forzare lo stato.

Al momento in cui scrivo, Chrome supporta più argomenti su add()e remove(), ma nessuno degli altri browser lo fa. IE 10 e versioni precedenti, Firefox 23 e versioni precedenti, Chrome 23 e versioni precedenti e altri browser non supportano il secondo argomento toggle().

Ho scritto il seguente piccolo polyfill per risolvermi fino a quando il supporto non si espande:

(function () {
    /*global DOMTokenList */
    var dummy  = document.createElement('div'),
        dtp    = DOMTokenList.prototype,
        toggle = dtp.toggle,
        add    = dtp.add,
        rem    = dtp.remove;

    dummy.classList.add('class1', 'class2');

    // Older versions of the HTMLElement.classList spec didn't allow multiple
    // arguments, easy to test for
    if (!dummy.classList.contains('class2')) {
        dtp.add    = function () {
            Array.prototype.forEach.call(arguments, add.bind(this));
        };
        dtp.remove = function () {
            Array.prototype.forEach.call(arguments, rem.bind(this));
        };
    }

    // Older versions of the spec didn't have a forcedState argument for
    // `toggle` either, test by checking the return value after forcing
    if (!dummy.classList.toggle('class1', true)) {
        dtp.toggle = function (cls, forcedState) {
            if (forcedState === undefined)
                return toggle.call(this, cls);

            (forcedState ? add : rem).call(this, cls);
            return !!forcedState;
        };
    }
})();

DOMTokenListSono previsti un browser moderno con conformità ES5 , ma sto usando questo polyfill in diversi ambienti specificamente mirati, quindi funziona benissimo per me, ma potrebbe essere necessario modificare gli script che verranno eseguiti in ambienti browser legacy come IE 8 e precedenti .

Puoi fare come di seguito

Inserisci

elem.classList.add("first", "second", "third");

Rimuovere

elem.classList.remove("first", "second", "third");

Riferimento

TLDR;

In questo caso, la rimozione sopra dovrebbe funzionare. Ma in caso di rimozione, è necessario assicurarsi che la classe esista prima di rimuoverli

const classes = ["first","second","third"];
classes.forEach(c => {
  if (elem.classList.contains(c)) {
     element.classList.remove(c);
  }
})

Ecco una soluzione per gli utenti di IE 10 e 11 che sembrava piuttosto semplice.

var elem = document.getElementById('elem');

['first','second','third'].map(item => elem.classList.add(item));

<div id="elem">Hello World!</div>

O

var elem = document.getElementById('elem'),
    classes = ['first','second','third'];

classes.map(function(item) {
    return elem.classList.add(item);
});

<div id="elem">Hello World!</div>

La definizione standard consente solo di aggiungere o eliminare una singola classe. Un paio di piccole funzioni wrapper possono fare ciò che chiedi:

function addClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  console.log (classes);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.add (classes[i][j]);
  }
}

function removeClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.remove (classes[i][j]);
  }
}

Questi wrapper consentono di specificare l'elenco di classi come argomenti separati, come stringhe con spazio o elementi separati da virgola o una combinazione. Per un esempio, vedere http://jsfiddle.net/jstoolsmith/eCqy7

Una soluzione molto semplice, non elegante, ma funzionante che dovrei credere è molto cross-browser:

Crea questa funzione

function removeAddClasses(classList,removeCollection,addCollection){
    for (var i=0;i<removeCollection.length;i++){ 
        classList.remove(removeCollection[i]); 
    }
    for (var i=0;i<addCollection.length;i++){ 
        classList.add(addCollection[i]); 
    }
}

Chiamalo così: removeAddClasses (node.classList, arrayToRemove, arrayToAdd);

... dove arrayToRemove è un array di nomi di classi da rimuovere: ['myClass1', 'myClass2'] eccetera

... e arrayToAdd è un array di nomi di classi da aggiungere: ['myClass3', 'myClass4'] eccetera

Supponiamo di avere una matrice di classi da aggiungere, è possibile utilizzare la sintassi di diffusione ES6:

let classes = ['first', 'second', 'third']; elem.classList.add(...classes);

Mi è piaciuta la risposta di @ rich.kelly, ma volevo usare la stessa nomenclatura di classList.add()(stringhe separate da virgola), quindi una leggera deviazione.

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.add(arguments[i]);
  }
}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.remove(arguments[i]);
  }
}

Quindi puoi quindi usare:

document.body.classList.addMany('class-one','class-two','class-three');

Devo testare tutti i browser, ma questo ha funzionato per Chrome.
Dovremmo verificare qualcosa di più specifico dell'esistenza di DOMTokenList.prototype.addMany? Cosa causa esattamente classList.add()l'errore in IE11?

Un altro polyfill per element.classListè qui . L'ho trovato tramite MDN .

Includo quello script e uso element.classList.add("first","second","third")come previsto.