Verificar se elemento existe com jQuery ou Javascript

Como verificar se elemento existe utilizando jQuery, verificando pelo ID, Classe ou Nome e também exemplos utilizando apenas Javascript (sem a utilização de nenhuma biblioteca externa).

Como verificar se elemento existe com jQuery e Javascript

Como verificar se um elemento existe, passo a passo

Você pode utilizar o exemplo a seguir para validar se um ID, classe ou até mesmo nome está presente no HTML.

Para verificar se elemento existe com Biblioteca jQuery iremos utilizar a propriedade “length” juntamente com jQuery para verificar se o elemento existe.

A propriedade “length” irá retornar 0 “zero” caso não seja encontrado nenhum elemento pelo seletor do jQuery.

Seletor de elemento do jQuery é bem flexível, permitindo que qualquer elemento seja encontrado.

Exemplo utilizando a propriedade Length

Validando pelo ID

if ( $( "#myDiv" ).length ) { 
/* elemento existe */ 
}

Validando por uma classe

if ( $( ".className" ).length ) { 
/* elemento existe */ 
}

Validando pelo nome

if ( jQuery( "input[name=nameElement]" ).length ) { 
/* elemento existe */
}

Mais exemplos de seletores com jQuery

jQuery possuí uma extensa lista de opções de seletores que você pode estar utilizando, juntamente com os códigos acima.

Tente ser o mais criterioso possível com a regra de seleção, isso irá aumentar a qualidade do seu código evitando futuros Bugs durante alguma manutenção.

$(“*”) Selecione todos os elementos
$(this) Seleciona o elemento atual
$(“p.intro”) Seleciona todos os <p> com a classe “intro”
$(“p:first”) Seleciona o primeiro <p>
$(“ul li:first”) Seleciona o primeiro <li> do primeiro <ul>
$(“ul li:first-child”) Seleciona o primeiro <li> de todos os <ul>
$(“[href]”) Seleciona todos os elementos com atributo href
$(“a[target=’_blank’]”) Seleciona todos <a> com valor do atributo target igual a “_blank”
$(“a[target!=’_blank’]”) Seleciona todos <a> com valor do atributo target diferente de “_blank”
$(“:button”) Selecione todos os botões <button> e <input> do tipo type=”button”
$(“tr:even”) Selecione os elementos <tr> pares
$(“tr:odd”) Selecione os elementos <tr> impares

Utilizando apenas Javascript

Caso você não queira utilizar nenhuma biblioteca para fazer essa operação, você pode utilizar apenas Javascript.

var element =  document.getElementById('ID_DO_ELEMENTO');
if (typeof(element) != 'undefined' && element != null)
{
// exists.
}

Uma segunda forma de verificar se o elemento existe utilizando Javascript é com a propriedade parentNode.

var myElement = document.getElementById("id_do_seu_elemento");
if(!myElement.parentNode)
{
//node is NOT on the dom
}
else
{
//element is on the dom
}

Conclusão

É muito importante que você evite utilizar bibliotecas/frameworks como o jQuery para realizar simples operações com o HTML.

Isso irá ajudar a manter o seu site mais rápido, reduzindo o tamanho da página, ou seja, a quantidade de kbs que o seu visitante deverá que baixar para que o site seja totalmente carregado.

Quando possível, carregue o jQuery utilizando um CDN: Lista com os jQuery CDN gratuítos

Google possuí um repositório de bibliotecas no qual está incluso diversas versões do jQuery.

https://developers.google.com/speed/libraries/

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *