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

Oct 21, 2024 pm 10:20 PM

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!

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

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

10 Highlighters de syntaxe jQuery

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

10 tutoriels JavaScript & jQuery MVC

See all articles