Comment vérifier si un élément existe dans le DOM visible

Rechercher un élément dans le DOM à l'aide de son ID est une tâche courante en JavaScript. Cependant, que se passe-t-il si vous devez vérifier l'existence d'un élément sans utiliser cette méthode ?

Identifier les éléments invisibles

Lorsqu'un élément est supprimé du DOM, sa référence dans une variable JavaScript reste existe. Cela peut conduire à des résultats inattendus lors de la vérification de l'existence d'un élément à l'aide de typeof ou === null.

Approche actuelle

La fonction isNull() tente de contourner ce problème en définissant temporairement un ID aléatoire sur l'élément, en le trouvant à l'aide de getElementById(), puis en supprimant l'ID temporaire. Cette approche renvoie vrai si l'élément n'est pas trouvé dans le DOM et faux s'il est trouvé.

Simplification pour le contrôle d'existence

Si le but est simplement de vérifier si un élément existe (quel que soit le sa visibilité), une approche plus simple consiste à utiliser l'une des méthodes de sélection d'éléments du navigateur :

var elementExists = document.getElementById("find-me");

Pour une valeur booléenne, vous pouvez utiliser !! avant l’appel de la méthode de sélection. De plus, des méthodes telles que querySelector() et getElementsByTagName() peuvent être utilisées.

Vérification de la visibilité dans le DOM

Pour vérifier spécifiquement si un élément existe dans le DOM visible, la méthode contain() peut être utilisé :

document.body.contains(someReferenceToADomElement);

Cette méthode renvoie true si l'élément est présent dans le DOM et faux sinon.