Verificar se elemento existe com jQuery e Javascript

jQuery - Logo

jQuery – javascript

Eu já precisei inúmeras vezes de saber se um elemento existe no DOM usando jQuery e sinceramente, sempre era um estresse no começo (anos atrás) depois resolvi pesquisar qual a melhor forma de fazer essa verificação. Dai descobri que todas ajudam, mas a mais eficiente é verificar o tamanho do objeto retornado pois é algo nativo do próprio javascript e claro que irá ser mais rápido que verificar com qualquer script criado. Sendo assim, veja abaixo como você pode fazer para verificar se o elemento existe usando jQuery:

$(document).ready(function() {
    
    if ($("#id_elemento").length){ 

        console.log("O elemento existe no DOM");
    
    } else {

        console.log("Ops! Elemento não existe no DOM");

    }

});

Caso tenha gostado mas não gostaria de usar jQuery gostaria de tentar usando o próprio javascript de forma bem pura que é praticamente a mesma coisa usando o jQuery porém um pouco mais eficiente. Veja como poderia fazer com javascript:

// metodo 1: pegando pelo id html5
if (document.querySelector('#id_elemento')){
	
	console.log('Woohoo! Elemento existe');

} 

// metodo 2: pegando pelo id
if (document.getElementById('id_elemento')){
	
	console.log('Woohoo! Elemento existe');

} 

// metodo 3: pegando varios elementos
if (document.querySelectorAll('.classe_de_elementos').length) {
	
	console.log('Woohoo! Elementos existem');

}

Como pode ter visto, ofereci várias alternativas para cada situação pois usando javascript as possibilidades são inúmeras.

Espero que tenha lhe ajudado a melhorar seu trabalho diário.

Abraços 😀

, , ,