28.11.2024

Adicionando e Removendo Múltiplas Classes com classList

Resposta Rápida

Sim, isso é definitivamente possível! Você pode usar os métodos classList.add() e classList.remove() para adicionar ou remover múltiplas classes de uma só vez:

element.classList.add('classe1', 'classe2');    // Aqui, 'classe1' e 'classe2' são adicionadas
element.classList.remove('classe1', 'classe2'); // E aqui, 'classe1' e 'classe2' são removidas

Então, prepare-se para uma mini-aula! Que tal aprender a gerenciar conjuntos dinâmicos de classes? Vamos para a próxima seção!

Trabalhando com Listas de Classes Dinâmicas

Usando o Operador Spread

Você está familiarizado com o operador spread (...)? Seu principal propósito é descompactar objetos iteráveis, como arrays ou strings, transformando seus elementos em valores separados:

const classesAAdicionar = ['classe1', 'classe2', 'classe3'];
element.classList.add(...classesAAdicionar); // Agora todas as classes do array são adicionadas

Quando é hora de liberar espaço, este operador remove facilmente as classes:

const classesARemover = ['classe1', 'classe2', 'classe3'];
element.classList.remove(...classesARemover); // Todas as classes removidas como se nunca tivessem existido

Usando o Método apply

Se você prefere abordagens clássicas e valoriza métodos testados com o tempo, o método apply será útil para você:

element.classList.add.apply(element.classList, classesAAdicionar); // A sintaxe é um pouco complicada, mas a solução é eficaz!
element.classList.remove.apply(element.classList, classesARemover); // Adeus classes! Sua passagem está bloqueada!

Personalizando classList: Pelas Suas Regras

Adicionando Métodos ao Protótipo

Se os métodos padrão do classList não atendem às suas necessidades, você pode aprimorá-lo adicionando seus próprios métodos addMany ou removeMany. Uma abordagem personalizada? Gradativa!

DOMTokenList.prototype.addMany = function(...classes) {
    classes.forEach(classeUnica => {
        if (!this.contains(classeUnica)) {
            this.add(classeUnica); // É como checar em uma festa: "Não está na lista? Por favor, entre!"
        }
    });
};

DOMTokenList.prototype.removeMany = function(...classes) {
    classes.forEach(classeUnica => {
        this.remove(classeUnica); // Limpando a lista: "classe1, classe2, classe3 – sua hora chegou!"
    });
};

Prevenindo Conflitos de Nomes

Tenha cuidado ao criar métodos de protótipo. É vital evitar possíveis sobreposições com métodos que já existem ou que podem ser adicionados no futuro:

if (!('addMany' in DOMTokenList.prototype)) {
    // Se o método addMany estiver faltando, iremos adicioná-lo. Como temos um plano, vamos executá-lo.
}

if (!('removeMany' in DOMTokenList.prototype)) {
    // Estamos adicionando removeMany. Porque o que é adicionado e o que desaparece sob demanda é sempre benéfico.
}

Visualização

Vamos imaginar o processo de mudar o classList como organizar um guarda-roupa. É tão simples quanto...

Guarda-Roupa Antes: |👔👖👗🧣|

Vamos adicionar alguns novos itens de uma só vez:

guardaRoupa.classList.add('👕', '👚', '🧢');  // E voilà! O guarda-roupa está cheio!

Guarda-Roupa Depois:  |👔👖👗🧣👕👚🧢|

Agora vamos remover vários itens:

guardaRoupa.classList.remove('👖', '🧣'); // É sexta-feira, não precisamos de calças jeans e cachecóis hoje!

Guarda-Roupa Depois:  |👔👗👕👚🧢|

Mudar o estilo do guarda-roupa agora é muito fácil!

Eficiência e Compatibilidade

O classList tem alto desempenho e ótima compatibilidade com navegadores modernos. Usá-lo para gerenciar múltiplas classes não é apenas conveniente, mas prático: evita erros e simplifica a compatibilidade entre navegadores, ao contrário de métodos menos eficientes que gerenciam cada classe individualmente.

Recursos Úteis

1. Elemento: Propriedade classList - Web API | MDN — Um guia abrangente sobre classList nos MDN Web Docs.
2. A Propriedade classList do Objeto Elemento — Um tutorial sobre trabalhando com classList do W3Schools.
3. API classList() | CSS-Tricks - Uma descrição detalhada das capacidades do classList do CSS-Tricks.
4. Posso Usar... Tabelas de suporte para HTML5, CSS3, etc — Um recurso útil para verificar o suporte ao classList em navegadores.

Video

Navigation