Verifique se a classe específica existe na página usando JavaScript

Durante o desenvolvimento do site, às vezes os programadores se preocupam com o motivo pelo qual o resultado desejado não é mostrado na página, então eles precisam verificar se a classe específica é adicionada à página ou elemento específico ou não. Para fazer isso, o JavaScript fornece alguns métodos para a verificação de classe de um elemento ou uma página, como o método contém () e a propriedade de comprimento com o método getElementsByclassName ().

Este blog definirá os métodos para determinar se a classe específica existe na página usando JavaScript.

Como verificar se a classe específica existe na página usando JavaScript?

Para verificar se a classe específica existe, use os seguintes métodos JavaScript:

• documento.getElementsbyclassName () com propriedade de comprimento.
• Método contém ()

Método 1: Verifique se existe uma classe específica/específica na página usando o documento.getElementsbyclassName () com propriedade de comprimento

Use o "getElementsbyclassName ()”Método com o“comprimento”Propriedade para determinar se a classe específica existe na página ou não. O método getElementsByClassName () é usado para selecionar os elementos com o nome da classe e depois é verificado para ver se o atributo de comprimento da coleção é maior que 0. Se ele produzir “sim”, A aula está presente na página.

Sintaxe

Siga a sintaxe dada para usar o método getElementsByClassName () com a propriedade Length:

documento.getElementsbyclassName ('ClassName').comprimento

Passe o nome da classe como um parâmetro que precisa ser verificado.

Exemplo

Em um arquivo html, primeiro projete a página. Aqui, adicionaremos uma imagem como um logotipo no cabeçalho usando um elemento div e tag:

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

Em seguida, defina o título no cabeçalho:

Verifique se a classe específica existe na página usando JavaScript

Depois disso, crie um botão na página que chamará o “CheckClassexists ()”Função que informa se a classe específica existe na página ou não:

Clique aqui!

A execução do código HTML acima fornece a página a seguir no navegador:

Agora, no arquivo javascript ou na tag, use o seguinte código:

função checkClassexists ()
const ClassCheck = documento.getElementsbyclassName ('flex-item1').comprimento> 0;
if (classCheck)
alerta (classe '✅ "Flex-Item1" existe na página');
outro
Alert ('⛔️ Classe "Flex-Item1" não existe na página');

No código acima:

• Primeiro, defina uma função “CheckClassexists ()”Isso acionará o botão Clique.
• Crie uma variável que armazena o resultado para verificar a classe “flex-item1”Usando o“getElementsbyclassName ()”Método e depois verifique se a coleção é“comprimento”Atributo é maior que 0.
• Agora, mostre uma mensagem de alerta para a existência de classe e não existe na página.
• Se o valor resultante na variável for maior que 0, mostra "classe"Flex-Item1 "existe na página”.
• Caso contrário, uma mensagem de alerta mostrará “aula ““Flex-Item1 "não existe na página”.

Saída

Para verificar se o elemento especificado contém a classe específica em JavaScript, verifique a próxima seção.

Método 2: Verifique se a classe específica existe na página usando o método contains ()

Para determinar se uma classe específica existe em uma página da web, use o “contém ()”Método do“Lista de classe" propriedade. Passe o nome da classe no método contains () e dá verdade se o nome da classe existir no elemento especificado, ele retorna false.

Sintaxe

Use a seguinte sintaxe para o método contains ():

Lista de classe.Contém ('ClassName')

Exemplo

Como sabemos, todo o conteúdo da página da web está dentro da tag, então iremos primeiro buscar o elemento corporal usando o ID atribuído:

Clique aqui!

Defina uma função e busque o elemento corporal passando o ID atribuído “pág" no "getElementById ()”Método, então chama o“contém ()”Método passando a classe“Divstyle”Para verificar se essa classe existe em toda a etiqueta ou não:

função checkClassexists ()
const ClassCheck = documento.getElementById ('PG');
if (ClassCheck.Lista de classe.contém ('divstyle'))
alerta ('✅ ✅ Classe "Divstyle" existe na página');
outro
Alert ('⛔️ Classe "Divstyle" não existe na página');

A saída mostra que o “corpo”Elemento/tag não contém o“Divstyle" aula:

Compilamos as informações essenciais relacionadas à verificação de uma classe específica na página usando JavaScript.

Conclusão

Para determinar se a classe específica existe na página, utilize o “documento.getElementsbyclassName ()”Método com o“comprimento"Propriedade ou a"contém ()”Método. O primeiro método é o mais comumente usado para esse fim. O método contains () é usado para qualquer elemento específico. Neste blog, definimos os métodos para determinar se a classe específica existe na página usando JavaScript.