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 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.
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”) | |
$(“p:first”) | |
$(“ul li:first”) | |
$(“ul li:first-child”) | |
$(“[href]”) | Seleciona todos os elementos com atributo href |
$(“a[target='_blank']”) | |
$(“a[target!='_blank']”) | |
$(“:button”) | |
$(“tr:even”) | |
$(“tr:odd”) |
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 }
Vanilla Javascript
Caso você tenha seletores mais avançados:
if(document.querySelectorAll("#elemId").length){}
if(document.querySelector("#elemId")){}
if(document.getElementById("elemId")){}
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/