Selezionare elementi con classi multiple in JavaScript

Scopri i diversi approcci per la selezione di elementi HTML con più di una classe

Ottimizza il tuo codice: selezione di elementi HTML con JavaScript

Guida alla selezione di classi HTML con JavaScript

Introduzione

Quando vuoi lavorare con il DOM in JavaScript, è comune dover selezionare elementi HTML in base alle loro classi. Ma cosa succede quando un elemento ha più di una classe? Come puoi selezionare gli elementi che hanno specificamente entrambe le classi, almeno una di esse, solo una delle due o nessuna delle due? Qui sotto trovi la risposta!

AND (entrambe le classi)

Se vuoi selezionare gli elementi che hanno sia la classe "classe1" che la classe "classe2", puoi farlo in due modi:

    
// Opzione 1
var list = document.getElementsByClassName("classe1 classe2");

// Opzione 2
var list = document.querySelectorAll(".classe1.classe2");

Entrambi questi approcci restituiscono una NodeList contenente gli elementi che soddisfano entrambe le classi specificate.

OR (almeno una classe)

Se vuoi selezionare gli elementi che hanno almeno una delle due classi, usa questa riga di codice:

    
var list = document.querySelectorAll(".classe1,.classe2");

Questa riga di codice seleziona tutti gli elementi che hanno la classe "classe1" o la classe "classe2" od entrambe ma escluderà tutti gli elementi che hanno altre classi oltre a "classe1", "classe2" od entrambe.

XOR (una classe ma non l'altra)

Se vuoi selezionare gli elementi che hanno solo una delle due classi, ma non entrambe, puoi farlo con:

    
var list = document.querySelectorAll(".classe1:not(.classe2),.classe2:not(.classe1)");

Questa riga di codice seleziona gli elementi che hanno solo la classe "classe1" o solo la classe "classe2", escludendo quelli che hanno entrambe le classi o nemmeno una delle due.

NAND (non possiede entrambe le classi)

Se vuoi selezionare gli elementi che non possiedono entrambe le classi, utilizza:

    
var list = document.querySelectorAll(":not(.classe1),:not(.classe2)");

Questa riga di codice seleziona tutti gli elementi che non hanno la classe "classe1" e, allo stesso tempo, non hanno nemmeno la classe "classe2". Quindi gli elementi che hanno solo "classe1" o solo "classe2" verranno comunque selezionati.

NOR (nessuna delle due classi)

Infine, se vuoi selezionare gli elementi che non hanno nessuna delle due classi, puoi utilizzare:

    
var list = document.querySelectorAll(":not(.classe1):not(.classe2)");

Questa riga di codice seleziona tutti gli elementi che non hanno né solo la classe "classe1" né solo la classe "classe2" né entrambe.

Conclusione

In conclusione, JavaScript offre diverse opzioni per selezionare elementi con classi multiple, consentendo una flessibilità nella manipolazione del DOM in base alle specifiche esigenze del tuo progetto.

Qui sotto trovi un esempio molto semplice che ho creato per rendere più facile la comprensione delle differenti tipologie di selezione appena descritte.

See the Pen Selezionare elementi HTML con classi multiple in JavaScript by Fantantonio (@Fantantonio) on CodePen.

Se ti è piaciuto questo articolo e vorresti leggerne altri quando disponibili, considera di aggiungere il Feed RSS in un aggregatore di notizie come Feedly oppure salva questo sito tra i preferiti e torna quando vuoi 👋

Author: Fantantonio

Date: 03/02/2024

Categories: devtips

Tags: javascript html classi