Vérifiez si l'élément existe dans le DOM en JavaScript

Pour vérifier qu’un élément correspondant existe, choisissez la méthode de recherche adaptée à votre critère. document.getElementById() renvoie l’élément correspondant ou null ; vérifiez donc que le résultat est une valeur truthy. Les recherches par classe et par balise renvoient plutôt des collections : vérifiez leur length pour savoir s’il y a des correspondances. Même vide, une collection reste un objet qui s’évalue comme truthy dans un contexte booléen.

Utiliser getElementById() pour trouver un élément correspondant

Utilisez getElementById() lorsque vous connaissez l’id unique d’un élément. La méthode renvoie un Element si l’identifiant correspond, ou null si aucun élément ne possède cet identifiant. Passez l’identifiant sans préfixe #.

L’exemple suivant, destiné à une page dans un navigateur, recherche le lien dont l’identifiant est help-link :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

<a id="help-link" href="/help">Help</a>
<script>
  const helpLink = document.getElementById("help-link");
  const exists = helpLink !== null;
  console.log(exists);
</script>

La variable exists est de type booléen. Boolean(helpLink) ou !!helpLink convertit également le résultat en true ou false. Utilisez !== null si vous voulez que la vérification indique explicitement la valeur renvoyée par la recherche.

Vérifier les correspondances par classe, nom et balise

Utilisez getElementsByClassName() pour rechercher une classe, getElementsByName() pour rechercher un attribut name et getElementsByTagName() pour rechercher une balise d’élément. Ces méthodes s’appuient sur des attributs différents : par exemple, une valeur de classe se trouve dans class, tandis que le nom d’un contrôle de formulaire se trouve dans name.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

<input class="search-field" name="query">
<script>
  const byClass = document.getElementsByClassName("search-field");
  const byName = document.getElementsByName("query");
  const byTag = document.getElementsByTagName("input");

  console.log(byClass.length > 0);
  console.log(byName.length > 0);
  console.log(byTag.length > 0);
</script>

getElementsByClassName() et getElementsByTagName() renvoient des objets HTMLCollection dynamiques. getElementsByName() renvoie une NodeList. Une collection sans correspondance a une longueur de 0 ; elle reste un objet et ne vaut pas null. Pour vérifier qu’il existe une correspondance, utilisez collection.length > 0 (ou collection.length !== 0).

Comprendre les résultats des recherches et les vérifications booléennes

Une recherche qui renvoie un seul élément et une recherche qui renvoie une collection nécessitent des vérifications différentes. Convertissez le résultat de getElementById() avec Boolean(element) ou comparez-le à null. Pour une collection issue d’une recherche par classe, nom ou balise, vérifiez plutôt sa length. Appliquer directement !! à une collection ne permet pas de savoir si elle contient un élément : qu’elle soit vide ou non, la collection est un objet qui s’évalue comme truthy dans un contexte booléen. Vérifiez sa length pour déterminer si elle contient des correspondances.

Choisissez l’API en fonction de votre question : « existe-t-il un élément portant cet identifiant ? » ou « combien d’éléments correspondent à ce critère ? ». Si vous avez besoin des éléments par la suite, conservez l’élément ou la collection renvoyée au lieu de la convertir trop tôt en valeur booléenne.

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const matches = [{ id: "help-link" }];
const exists = matches.length > 0;
console.log(exists);

Cet exemple illustre de manière autonome la vérification de la longueur d’une collection ; les extraits spécifiques au DOM ci-dessus sont du code destiné à une page dans un navigateur et ne sont pas exécutés ici.

Vérifier si un nœud se trouve dans document.body

document.body.contains(node) renvoie une valeur booléenne indiquant si node est l’élément body lui-même ou l’un de ses descendants. Cette méthode vérifie la présence dans l’arbre DOM, et non la visibilité à l’écran. Un nœud peut se trouver dans body tout en étant masqué par CSS ou autrement non affiché.

Passez un seul nœud à contains(). Si une recherche vous a renvoyé une collection, choisissez d’abord un élément et tenez compte du fait que la collection peut être vide. Par exemple, const matches = document.getElementsByName("query"); const isInBody = matches.length > 0 && document.body.contains(matches[0]); vérifie uniquement le premier nœud correspondant ; cet exemple ne teste pas toutes les correspondances. Si vous voulez savoir si au moins un nœud correspondant se trouve dans body, vérifiez les éléments un par un.