Por qué no existe exists() en jQuery y cómo verificar un elemento sin errores

Por qué no hay exists() en jQuery y cómo no romper tu código

Cualquiera que haya escrito al menos una vez en jQuery se ha enfrentado a esto: intentas acceder a un elemento que no está en la página y obtienes un error, el script falla, el usuario ve una pantalla vacía. Lógicamente surge la pregunta: «¿Existe una función exists() en jQuery?».

Esta pregunta es un verdadero éxito en Stack Overflow (más de 150 mil visitas). Y la respuesta te sorprenderá: no, jQuery no tiene un método incorporado exists(). Pero esto no es un error, sino una característica. En este artículo analizaremos por qué sucede esto, qué errores cometen los principiantes (y no solo) y cómo verificar correctamente la existencia de elementos. ¡Allá vamos!

Respuesta corta: «Longitud» lo es todo

La forma más simple y correcta de verificar si un elemento existe en la página es usar la propiedad length. Si el objeto jQuery contiene al menos un elemento, length será mayor que cero, lo que en un contexto booleano da true.

if ($('#my-element').length) {\n    // El elemento existe — se puede trabajar\n    $('#my-element').show();\n} else {\n    // El elemento no existe — no hacemos nada\n    console.log('Elemento no encontrado');\n}

¿Por qué funciona esto? jQuery devuelve un objeto similar a un array. Si el selector no encuentra nada, la longitud de ese objeto es 0. 0 en JavaScript es false.

Se puede escribir aún más corto:

if ($('#my-element').length > 0) {\n    // También funciona, pero es redundante\n}

Top 5 errores al verificar la existencia de elementos en jQuery

Error #1: Acceso directo a un elemento inexistente

El error más común y peligroso es intentar llamar a un método en un objeto jQuery vacío:

// Código que fallará con un error\n$('#nonexistent').text('¡Hola!');

En realidad, este código no fallará. jQuery está diseñado para que llamar a métodos en un objeto vacío simplemente no haga nada. Pero el problema es: si intentas obtener un valor, por ejemplo .val(), obtendrás undefined. Y si intentas acceder al elemento DOM mediante un índice, obtendrás un error Cannot read properties of undefined.

// ¡Esto ya es peligroso!\nvar text = $('#nonexistent').text(); // devuelve una cadena vacía\nvar value = $('#nonexistent').val(); // devuelve undefined\n\n// Y esto es un error garantizado\nvar firstClass = $('#nonexistent')[0].className; // TypeError!

Error #2: Uso de $(selector).size()

Antes, jQuery tenía el método .size(), que devolvía la cantidad de elementos. Se consideró obsoleto desde jQuery 1.8 y se eliminó por completo en la versión 3.0. Usarlo hoy es de mal gusto y un riesgo para la compatibilidad.

// Mal (código obsoleto)\nif ($('.my-class').size() > 0) { ... }\n\n// Bien (enfoque moderno)\nif ($('.my-class').length) { ... }

Error #3: Confusión con .is() y filtrado

El método .is() verifica si el elemento actual coincide con un selector. No verifica la existencia del elemento en absoluto, sino que trabaja con elementos ya encontrados. Los principiantes suelen escribir algo como esto:

// Incorrecto: .is() no reemplaza la verificación de existencia\nif ($('#my-element').is('*')) {\n    // ¿El elemento existe?\n}

Esto funcionará, pero se ve extraño y es ineficiente. .is('*') simplemente verifica que el elemento sea cualquier etiqueta. Si el elemento existe, devuelve true; si no, false. Pero, ¿para qué complicarse si existe .length?

Error #4: Verificación con document.getElementById

Algunos desarrolladores mezclan JavaScript puro y jQuery cuando no es necesario:

// Redundante y poco elegante\nif (document.getElementById('my-element')) {\n    $('#my-element').addClass('acti