Esto permite a los desarrolladores web front-end aplicar fácilmente estilos CSS a un elemento, o identificar y recuperar fácilmente un elemento del DOM. Un solo elemento HTML puede tener varias clases. Del mismo modo, varios elementos HTML pueden compartir la misma clase: no hay restricciones basadas en el tipo de elemento y las clases no necesitan ser únicas.

Hay dos formas sencillas de establecer la clase de un elemento:

1. Modificación de la propiedad className (que sirve como captador y setter)
2. Modificación de la propiedad classList mediante sus métodos integrados

Por lo general, se recomienda el segundo enfoque, utilizando la propiedad classList, ya que el código resultante suele ser más legible, más preciso y más funcional que cuando se modifica directamente la propiedad className.

La propiedad className

Puede acceder aclassNamede un elemento llamándolo directamente en el elemento devuelto por un querySelector determinado. Tomemos, por ejemplo, el siguiente código HTML de ejemplo:

<h1>
Quiero ser un Dev
</h1>

Este código crea un elemento <h1>, pero no incluye la clase. Ahora veamos un ejemplo de código JavaScript que intenta manipular este elemento:

console.log(documento.querySelector('h1').className);
//El resultado esperado es una cadena vacía

document.querySelector('h1').className = 'classy';
console.log(document.querySelector('h1').className);
//Resultado esperado: con clase

En el código anterior, la primera impresión en la consola devuelve una cadena vacía ya que el elemento <h1> no tiene ningún atributo de clase cuando se ejecuta el código. Por lo tanto, la propiedad className de vuelve una cadena vacía.

La segunda línea de código (línea 4) extrae el primer elemento <h1> encontrado mediante el método document.querySelector(). Donde antes la propiedad className recuperaba el nombre de clase para el elemento, podemos reutilizarlo aquí para asignar una clase al elemento. La aplicación del operador de asignación convierte la propiedad className de un getter en un setter. El ejemplo anterior asigna la clase "classy" al elemento <h1> obtenido del documento.

Ahora que hemos establecido el valor de clase del elemento <h1>, la segunda instrucción print recogerá el valor de clase y lo imprimirá en la consola. El resultado de esta impresión será "classy", la clase que asignamos en la quinta línea del guión.

Nota: La propiedad className es destructiva: si el elemento tenía una clase antes, ¡ahora se ha ido! La información de clase anterior se reemplazó con el nuevo valor "classy", y esta será la única clase en el elemento.

Sintaxis

Getter: Element.className

Setter: Element.className = class (String)

La propiedad classList

La propiedadclassListes de sólo lectura de forma predeterminada, pero incluye métodos y propiedades auxiliares que se pueden utilizar para manipular la lista de clases asignadas a un elemento HTML. Tome el siguiente documento de muestra a continuación:

<h1 class="multi-class header first title">
¡Soy súper Dev!
</h1>

Esto crea un elemento <h1> con varias clases. Podemos usar la propiedadclassListen JavaScript para revisar estas asignaciones de clase, como en el código siguiente:

console.log(document.querySelector('h1').classList.length);
// output: 4

console.log(document.querySelector('h1').classList.value);
// output: multi-class header first title

Al llamar a la propiedad length de classList para el elemento, se devuelve el número de clases que tiene el elemento.

Al llamar a la propiedad value de classList para el elemento, se devuelve la lista de nombres como una cadena.

classList métodos

Aunque la funcionalidad de solo lectura es útil, todavía no nos da la flexibilidad de la propiedad className. Para trabajar con classList, necesitamos hacer uso de métodos de soporte en el objeto classList.

Revisaremos cada función usando el elemento <h1> sample del ejemplo anterior. Este elemento tiene cuatro clases en su lista de clases: "multi-class", "header", "first" y "title". Los métodos siguientes manipulan esta lista de clases.

add()

El métodoadd() agrega otra clase a la lista:

document.querySelector('h1').classList.add('bulky');
console.log(document.querySelector('h1').classList.value);

// Output: multi-class header first title bulky

En el código anterior, agregamos la clase "voluminoso" a la lista. Esto agrega el nombre de clase que proporcionamos al final de la definición de clase, lo que resulta en agregar el nombre de clase "voluminoso" a la salida impresa.

remove()

Elremove() elimina una clase de la lista de clases:

document.querySelector('h1').classList.remove('bulky');

console.log(document.querySelector('h1').classList.value);
// Output: multi-class header first title

En este ejemplo, "voluminoso" se eliminó de la lista de clases del elemento, dejándolo con nuestras cuatro clases originales.

Nota: Puede agregar o eliminar varias clases a la vez, simplemente páselas como una cadena delimitada por comas (es decir, "extra, voluminoso, clases": esto agrega o elimina tres clases de la lista de clases).

toggle()

El método toggle() alterna una clase determinada en un objeto. Esto significa que la clase solicitada se agrega si falta o se elimina si está presente:

document.querySelector('h1').classList.toggle('toggles');

console.log(document.querySelector('h1').classList.value);
// output: multi-class header first title toggle


document.querySelector('h1').classList.toggle('toggles')

console.log(document.querySelector('h1').classList.value);
// output: multi-class header first title

Este código agrega, luego quita, la clase "toggles" usando el método toggle(). La primera instrucción console.log() incluirá "toggles" en la lista de clases, mientras que la segunda console.log() no lo hará.

replace()

El método replace() reemplaza un nombre de clase por otro. Se necesitan dos parámetros: el nombre de clase para reemplazar y el nuevo valor para reemplazarlo con:

console.log(document.querySelector('h1').classList.value);
// output: multi-class header first title

document.querySelector('h1').classList.replace('title', 'bundle')

console.log(document.querySelector('h1').classList.value);
// output: multi-class header first bundle

En el ejemplo anterior. Reemplazamos el nombre de clase "title" en nuestro elemento <h1> con una nueva clase: "bundle".