Maison > interface Web > js tutoriel > Comment vérifier l'existence d'un élément dans le DOM visible sans compter sur getElementById

Comment vérifier l'existence d'un élément dans le DOM visible sans compter sur getElementById

Barbara Streisand
Libérer: 2024-10-21 22:20:03
original
400 Les gens l'ont consulté

How to Verify Element Existence in the Visible DOM Without Relying on getElementById

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

Vous pouvez être confronté à des scénarios dans lesquels vous devez vérifier la présence d'un élément sans compter sur la méthode getElementById. Cet article présente une approche améliorée et fournit un aperçu du comportement des variables JavaScript.

Fonction personnalisée pour la vérification de l'existence d'un élément

Comme démontré dans le code fourni, la récupération d'un élément dans une variable ne garantit pas une référence en direct au DOM. Pour vérifier avec précision l'existence, vous pouvez utiliser une fonction comme isNull(). Cette fonction attribue un ID aléatoire à l'élément, le récupère à l'aide de l'ID attribué, puis supprime l'ID pour éviter les effets secondaires.

Méthodes alternatives

En plus de cette coutume fonction, il existe des options plus simples pour vérifier l'existence d'un élément :

  • Méthodes de sélection du navigateur : Des techniques telles que document.getElementById("find-me") ou des méthodes similaires qui renvoient une référence à l'élément ou null peut être utilisé. Pour un résultat booléen, postulez !! avant l'appel de la méthode.
  • Autres méthodes de sélection d'éléments : le document propose plusieurs méthodes pour rechercher des éléments, telles que querySelector(), getElementsByClassName(), etc. Vérifiez leurs propriétés de longueur car certaines méthodes (comme NodeList) renvoient des valeurs véridiques même lorsqu'elles sont vides.

Vérification DOM visible

Pour vérifier spécifiquement si un élément réside dans le DOM visible, utilisez la méthode contain() sur les éléments du DOM :

document.body.contains(someReferenceToADomElement);
Copier après la connexion

Cette méthode fournit une vérification d'existence plus précise.

Comprendre le comportement des variables JavaScript

En ce qui concerne la raison pour laquelle les variables JavaScript affichent le comportement observé, l'explication réside dans la nature des variables. Considérez le code :

var myVar = document.getElementById("myElem");
Copier après la connexion

myVar stocke une référence à l'élément, pas une connexion en direct avec celui-ci. Lorsque l'élément est supprimé du DOM, son pointeur de référence dans myVar n'est pas mis à jour. Ainsi, typeof myVar reste "object" et isNull(myVar) renvoie false, indiquant la présence apparente d'un élément malgré sa suppression.

En comprenant ces concepts, vous pouvez vérifier efficacement l'existence d'un élément dans divers scénarios DOM.

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!

source:php
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal