Maison  >  Article  >  interface Web  >  Comment puis-je déterminer si un élément est présent dans le DOM visible ?

Comment puis-je déterminer si un élément est présent dans le DOM visible ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-21 22:13:30391parcourir

How Can I Determine if an Element is Present in the Visible DOM?

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

Trouver 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 la vérification d'existence

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

<code class="javascript">var elementExists = document.getElementById("find-me");</code>

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é :

<code class="javascript">document.body.contains(someReferenceToADomElement);</code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn