Pourquoi n'y a-t-il pas exists() dans jQuery et comment vérifier un élément sans erreurs

Pourquoi n'y a-t-il pas exists() dans jQuery et comment ne pas casser son code

Quiconque a déjà écrit en jQuery a rencontré cela : vous essayez d'accéder à un élément qui n'est pas sur la page, et vous obtenez une erreur, le script plante, l'utilisateur voit un écran vide. Logiquement, la question se pose : « Existe-t-il une fonction exists() dans jQuery ? ».

Cette question est un véritable succès sur Stack Overflow (plus de 150 000 vues). Et la réponse va vous surprendre : non, jQuery n'a pas de méthode intégrée exists(). Mais ce n'est pas un bug, c'est une fonctionnalité. Dans cet article, nous allons voir pourquoi il en est ainsi, quelles erreurs commettent les débutants (et pas seulement) et comment vérifier correctement l'existence des éléments. C'est parti !

Réponse courte : « La longueur » est notre tout

La façon la plus simple et la plus correcte de vérifier si un élément existe sur la page est d'utiliser la propriété length. Si l'objet jQuery contient au moins un élément, length sera supérieur à zéro, ce qui donne true dans un contexte booléen.

if ($('#my-element').length) {\n    // L'élément existe — on peut travailler\n    $('#my-element').show();\n} else {\n    // L'élément n'existe pas — on ne fait rien\n    console.log('Élément non trouvé');\n}

Pourquoi cela fonctionne-t-il ? jQuery retourne un objet semblable à un tableau. Si le sélecteur n'a rien trouvé, la longueur de cet objet est 0. 0 en JavaScript est false.

On peut écrire encore plus court :

if ($('#my-element').length > 0) {\n    // Cela fonctionne aussi, mais c'est redondant\n}

Top 5 des erreurs lors de la vérification de l'existence d'éléments dans jQuery

Erreur #1 : Accès direct à un élément inexistant

L'erreur la plus fréquente et la plus dangereuse est d'essayer d'appeler une méthode sur un objet jQuery vide :

// Code qui plantera avec une erreur\n$('#nonexistent').text('Bonjour !');

En réalité, ce code ne plantera pas. jQuery est conçu de sorte que l'appel de méthodes sur un objet vide ne fait tout simplement rien. Mais voici le problème : si vous essayez d'obtenir une valeur, par exemple .val(), vous obtiendrez undefined. Et si vous essayez d'accéder à l'élément DOM via un index, vous obtiendrez une erreur Cannot read properties of undefined.

// Mais ceci est déjà dangereux !\nvar text = $('#nonexistent').text(); // retournera une chaîne vide\nvar value = $('#nonexistent').val(); // retournera undefined\n\n// Et ceci est une erreur garantie\nvar firstClass = $('#nonexistent')[0].className; // TypeError !

Erreur #2 : Utilisation de $(selector).size()

Avant, jQuery avait une méthode .size() qui retournait le nombre d'éléments. Elle était considérée comme obsolète dès jQuery 1.8 et a été complètement supprimée dans la version 3.0. L'utiliser aujourd'hui est une mauvaise pratique et un risque pour la compatibilité.

// Mauvais (code obsolète)\nif ($('.my-class').size() > 0) { ... }\n\n// Bon (approche moderne)\nif ($('.my-class').length) { ... }

Erreur #3 : Confusion avec .is() et le filtrage

La méthode .is() vérifie si l'élément actuel correspond à un sélecteur. Elle ne vérifie pas l'existence de l'élément en général, mais travaille avec des éléments déjà trouvés. Les débutants écrivent souvent quelque chose comme ceci :

// Incorrect : .is() ne remplace pas la vérification d'existence\nif ($('#my-element').is('*')) {\n    // L'élément existe ?\n}

Cela fonctionnera, mais semble étrange et inefficace. .is('*') vérifie simplement que l'élément est une balise quelconque. Si l'élément existe, il retournera true, sinon false. Mais pourquoi tant de complications alors qu'il y a .length ?

Erreur #4 : Vérification via document.getElementById

Certains développeurs mélangent le JavaScript pur et jQuery quand ce n'est pas nécessaire :

// Redondant et inesthétique\nif (document.getElementById('my-element')) {\n    $('#my-element').addClass('acti