Verifique si existe una clase específica en la página usando JavaScript

Durante el desarrollo del sitio web, a veces los programadores se preocupan por por qué el resultado deseado no se muestra en la página, por lo que tienen que verificar si la clase específica se agrega a la página o elemento en particular o no. Para hacerlo, JavaScript proporciona algunos métodos para la verificación de clase de un elemento o una página, como el método Conts () y la propiedad de longitud con el método GetElementsByClassName ().

Este blog definirá los métodos para determinar si la clase específica existe en la página usando JavaScript.

Cómo verificar si existe una clase específica en la página usando JavaScript?

Para verificar si la clase en particular existe, use los siguientes métodos de JavaScript:

• documento.getElementsByClassName () con propiedad de longitud.
• Contiene () método

Método 1: Verifique si existe una clase específica/particular en la página usando el documento.getElementsByClassName () con propiedad de longitud

Utilizar el "getElementsByClassName ()"Método con el"longitud"Propiedad para determinar si la clase en particular existe en la página o no. El método GetElementsByClassName () se utiliza para seleccionar los elementos con el nombre de la clase, y luego se verifica para ver si el atributo de longitud de la colección es mayor que 0. Si sale "Sí", La clase está presente en la página.

Sintaxis

Siga la sintaxis dada para usar el método GetElementsByClassName () con la propiedad Longitud:

documento.getElementsByClassName ('classname').longitud

Pasar el nombre de la clase como un parámetro que necesita ser verificado.

Ejemplo

En un archivo HTML, primero diseñe la página. Aquí, agregaremos una imagen como logotipo en el encabezado usando un elemento Div y una etiqueta:

src = "https: // linuxhint.com/wp-content/uploads/2019/11/logotipo-final.png " />

Luego, establezca el título en el encabezado:

Verifique si existe una clase específica en la página usando JavaScript

Después de eso, cree un botón en la página que llame al "checkclassexists ()"Función que dice si la clase específica existe en la página o no:

haga clic aquí!

Ejecución del código HTML anterior proporciona la página siguiente en el navegador:

Ahora, en el archivo JavaScript o en la etiqueta, use el siguiente código:

function checkClassexists ()
const classCheck = documento.getElementsByClassName ('Flex-Item1').longitud> 0;
if (classCheck)
alerta ('✅ Clase "Flex-Item1" existe en la página');
demás
alerta ('⛔️ Clase "Flex-Item1" no existe en la página');

En el código anterior:

• Primero, defina una función "checkclassexists ()"Que activará el clic del botón.
• Cree una variable que almacene el resultado para verificar la clase "Flex-item1"Al usar el"getElementsByClassName ()"Método y luego verifique si la colección"longitudEl atributo es mayor que 0.
• Ahora, muestre un mensaje de alerta para la existencia de clase y no existente en la página.
• Si el valor resultante en la variable es mayor que 0, muestra "clase"Flex-Item1 "existe en la página".
• Más, se mostrará un mensaje de alerta "clase "Flex-Item1 "no existe en la página".

Producción

Para verificar si el elemento especificado contiene la clase particular en JavaScript, verifique la siguiente sección.

Método 2: Verifique si la clase específica existe en la página usando el método Contiene ()

Para determinar si existe una clase en particular en una página web, use el "contiene()"Método del"Lista de clase" propiedad. Pase el nombre de clase en el método Contins (), y da verdadero si el nombre de clase existe en el elemento especificado, devuelve falso.

Sintaxis

Use la siguiente sintaxis para el método Contiene ():

Lista de clase.contiene ('classname')

Ejemplo

Como sabemos, todo el contenido de la página web está dentro de la etiqueta, por lo que primero buscaremos el elemento del cuerpo usando su ID asignada:

haga clic aquí!

Definir una función y obtener el elemento del cuerpo pasando la ID asignada "pg" en el "getElementById ()"Método, luego llama al"contiene()"Método pasando la clase"estilo divstal"Para verificar si esta clase existe en toda la etiqueta o no:

function checkClassexists ()
const classCheck = documento.getElementById ('PG');
if (ClassCheck.Lista de clase.contiene ('divstyle'))
alerta ('✅ Clase "DivStyle" existe en la página');
demás
alerta ('⛔️ Clase "DivStyle" no existe en la página');

La salida muestra que el "cuerpoEl elemento/etiqueta no contiene el "estilo divstal" clase:

Hemos compilado la información esencial relacionada con la verificación de una clase particular en la página usando JavaScript.

Conclusión

Para determinar si la clase en particular existe en la página, utilice el "documento.getElementsByClassName ()"Método con el"longitud"Propiedad o el"contiene()" método. El primer método es el más utilizado para este propósito. El método Contiene () se usa para cualquier elemento específico. En este blog, definimos los métodos para determinar si la clase específica existe en la página usando JavaScript.