Maison  >  Article  >  interface Web  >  Comment vérifier si un élément existe dans le DOM visible sans utiliser getElementById

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

DDD
DDDoriginal
2024-10-21 22:18:31769parcourir

How to Check if an Element Exists in the Visible DOM Without Using getElementById

Comment vérifier l'existence d'un élément dans le DOM visible

Pour déterminer si un élément existe dans le DOM visible sans utiliser getElementById, considérez ce qui suit alternatives :

Vérification de la présence dans le corps du document :

Comme suggéré par Csuwldcat, la méthode contain() des éléments DOM peut être utilisée pour vérifier si un élément est un descendant du corps du document. Cette méthode renvoie une valeur booléenne indiquant si l'élément fait partie du DOM visible.

<code class="js">document.body.contains(elementReference);</code>

Utilisation d'autres méthodes de sélection d'éléments :

Autres méthodes de sélection d'éléments, telles que comme querySelector(), querySelectorAll() et getElementsByClassName(), peuvent être utilisés pour rechercher des éléments en fonction de critères spécifiques. Si la référence d'élément résultante ou NodeList a une longueur de 0, l'élément n'existe pas.

Par exemple, pour rechercher un élément avec l'identifiant "find-me":

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

Remarque : querySelector() et querySelectorAll() renvoient respectivement le premier élément correspondant ou une NodeList. getElementsByClassName() renvoie une NodeList. Ainsi, vérifier la propriété length pour NodeLists est nécessaire pour déterminer si un élément existe.

Fonction personnalisée pour vérifier la présence d'un élément :

La fonction isNull fournie peut être utilisée pour vérifiez l'existence de l'élément en attribuant temporairement un ID aléatoire, en recherchant l'élément avec l'ID, puis en supprimant l'ID aléatoire. Cette approche vérifie efficacement si l'élément existe dans le DOM.

Ressources associées pour le comportement des variables JavaScript :

  • [Comprendre les étendues et les fermetures JavaScript](https : //developer.mozilla.org/en-US/docs/Glossary/Closure)
  • [Variables JavaScript : valeur par rapport à la référence](https://www.w3schools.com/js/js_variables.asp)
  • [Pass by Value vs Pass by Reference en JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/Pass_by_reference)

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