Por que não existe exists() no jQuery e como verificar elementos sem erros

Por que não existe exists() no jQuery e como não quebrar seu código

Quem já escreveu código com jQuery sabe bem: você tenta acessar um elemento que não está na página e recebe um erro, o script quebra, e o usuário vê uma tela em branco. Naturalmente surge a pergunta: "Existe uma função exists() no jQuery?".

Essa pergunta é um verdadeiro sucesso no Stack Overflow (mais de 150 mil visualizações). E a resposta vai te surpreender: não, o jQuery não tem um método nativo exists(). Mas isso não é um bug, é uma feature. Neste artigo, vamos entender por que isso acontece, quais erros iniciantes (e não só) cometem e como verificar a existência de elementos de forma correta. Vamos nessa!

Resposta rápida: "Length" é tudo que você precisa

A maneira mais simples e correta de verificar se um elemento existe na página é usar a propriedade length. Se o objeto jQuery contiver pelo menos um elemento, length será maior que zero, o que em um contexto booleano equivale a true.

if ($('#meu-elemento').length) {\n    // Elemento existe — pode trabalhar\n    $('#meu-elemento').show();\n} else {\n    // Elemento não encontrado — não faz nada\n    console.log('Elemento não encontrado');\n}

Por que isso funciona? O jQuery retorna um objeto semelhante a um array. Se o seletor não encontrar nada, o comprimento desse objeto é 0. Em JavaScript, 0 é considerado false.

Você pode escrever de forma ainda mais concisa:

if ($('#meu-elemento').length > 0) {\n    // Também funciona, mas é redundante\n}

Top 5 erros ao verificar a existência de elementos no jQuery

Erro #1: Acessar diretamente um elemento que não existe

O erro mais comum e perigoso é tentar chamar um método em um objeto jQuery vazio:

// Código que vai quebrar\n$('#inexistente').text('Olá!');

Na verdade, esse código não vai quebrar. O jQuery foi projetado para que chamar métodos em um objeto vazio simplesmente não faça nada. O problema é outro: se você tentar obter um valor, como .val(), vai receber undefined. E se tentar acessar um elemento DOM pelo índice, vai levar um erro Cannot read properties of undefined.

// Isso já é perigoso!\nvar texto = $('#inexistente').text(); // retorna string vazia\nvar valor = $('#inexistente').val(); // retorna undefined\n\n// Isso é erro garantido\nvar primeiraClasse = $('#inexistente')[0].className; // TypeError!

Erro #2: Usar $(selector).size()

Antigamente, o jQuery tinha o método .size(), que retornava o número de elementos. Ele foi considerado obsoleto já no jQuery 1.8 e removido completamente na versão 3.0. Usá-lo hoje é má prática e um risco de compatibilidade.

// Ruim (código legado)\nif ($('.minha-classe').size() > 0) { ... }\n\n// Bom (abordagem moderna)\nif ($('.minha-classe').length) { ... }

Erro #3: Confundir .is() com verificação de existência

O método .is() verifica se o elemento atual corresponde a um seletor. Ele não verifica se o elemento existe; ele trabalha com elementos já encontrados. Iniciantes costumam escrever algo assim:

// Incorreto: .is() não substitui a verificação de existência\nif ($('#meu-elemento').is('*')) {\n    // O elemento existe?\n}

Isso até funciona, mas é estranho e ineficiente. .is('*') apenas verifica se o elemento é qualquer tag HTML. Se o elemento existir, retorna true; se não, false. Mas por que complicar se você tem .length?

Erro #4: Verificar com document.getElementById

Alguns desenvolvedores misturam JavaScript puro com jQuery sem necessidade:

// Desnecessário e deselegante\nif (document.getElementById('meu-elemento')) {\n    $('#meu-elemento').addClass('ativo');\n}