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/

Resumo
Verificando se um Elemento Existe no Javascript
Nome do Artigo
Verificando se um Elemento Existe no Javascript
Descrição
Diversos métodos de se verificar se um Elemento Existe no Javascript
Autor

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.