Comprobar si un elemento contiene una clase en JavaScript

1. Utilice el método integrado element.classList.contains() para comprobar si un elemento contiene una clase en JavaScript
2. Utilice un selector de consultas y el método Element.matches() para comprobar si un elemento contiene una clase en JavaScript
3. Utilice indexOf() para comprobar si un elemento contiene una clase en JavaScript

El uso de clases en HTML le permite agrupar elementos y realizar las mismas operaciones en todos ellos en términos de estilo o funcionalidad. Como tal, puede cambiar fácilmente el comportamiento de todos los elementos que comparten una clase en una sola línea de código.

Hay situaciones en las que es posible que desee que un elemento forme parte de varias clases. HTML le permite hacer esto, pero hay ciertas reglas que debe seguir para evitar un comportamiento inesperado.

Además, seleccionar elementos por clase en JavaScript se vuelve un poco más complicado si están etiquetados con varias clases. No te preocupes; podemos comprobar si un elemento contiene una clase específica.

Utilice el método integrado element.classList.contains() para comprobar si un elemento contiene una clase en JavaScript

Como era de esperar, este caso de uso es lo suficientemente común como para tener su método nativo en JavaScript, que debería ser su primera opción si no hay otros requisitos especiales involucrados.

La esencia de este método es recuperar un elemento, iterar a través de todas las clases a las que pertenece y luego verificar si la clase que le das como argumento es realmente parte de la lista. Así es como funciona esto en la práctica:

<div id="mydiv" class="myclass1 myclass2">My Element</div>

let element = document.getElementById('mydiv');

console.log(element.classList.contains('myclass1'));

Producción :

true

El código JavaScript anterior es compatible con todos los navegadores modernos, aunque pueden surgir algunos problemas en versiones muy antiguas de Internet Explorer.

Utilice un selector de consultas y el método Element.matches() para comprobar si un elemento contiene una clase en JavaScript

Los selectores de consultas son herramientas de JavaScript muy poderosas, especialmente porque generalmente pueden hacer todo lo que hace jQuery, excepto que no necesita una biblioteca de terceros.

En este caso, el selector de consulta le permite seleccionar el elemento sobre el que desea realizar la verificación, mientras que el método Element.matches() le permite verificar una vez más si la clase está presente o no.

<div id="mydiv" class="myclass1 myclass2">My Element</div>

let element = document.querySelector('#mydiv');

console.log(element.matches('.myclass1'));

Producción :

true

Como puede ver, el código requerido para ambos métodos es más o menos el mismo en términos de complejidad y longitud. Sin embargo, el selector de consultas requiere un navegador más moderno que el método classList.contains(), así que tenlo en cuenta también.

Utilice indexOf() para comprobar si un elemento contiene una clase en JavaScript

Si bien los navegadores modernos son compatibles con los dos métodos detallados anteriormente, es posible que no tenga ese lujo. Por lo tanto, si su código tiene que ser compatible con versiones de navegador muy antiguas, también puede lograr el mismo resultado utilizando el método indexOf(). Así es como funciona:

<div id="mydiv" class="myclass1 myclass2">My Element</div>

let element = document.getElementById('mydiv');

function containsClass(element, className) {
  return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

console.log(containsClass(element, 'myclass1'));

Producción :

true

Naturalmente, este método es más complicado, aunque los resultados son los mismos. En esencia, creamos nuestro método llamado containsClass, que itera sobre la lista de clases de nuestro elemento.

Si se encuentra la clase que estamos buscando, entonces tendrá un índice de 0 o mayor, y el método devolverá true.