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

  2. HowTo
  3. JavaScript Howtos
  4. Vérifiez si l'élément existe dans le DOM …
Moataz Farid 30 janvier 2023
JavaScript JavaScript DOM
  1. Utilisez la méthode getElementById() pour vérifier l’existence d’un élément dans le DOM
  2. Utilisez le getElementsByClassName pour vérifier l’existence d’un élément dans le DOM
  3. Utilisez la fonction getElementsByName pour vérifier l’existence d’un élément dans DOM
  4. Utilisez le getElementsByTagName pour vérifier l’existence d’un élément dans le DOM
  5. Utilisez la fonction contains() pour vérifier l’existence d’un élément dans le DOM visible
Vérifiez si l'élément existe dans le DOM en JavaScript

Cet article explique comment nous pouvons vérifier l’existence d’un élément dans le DOM avec différentes méthodes.

Utilisez la méthode getElementById() pour vérifier l’existence d’un élément dans le DOM

Nous pouvons utiliser la fonction getElementById pour vérifier si un élément existe dans DOM en utilisant le Id de l’élément. Dans l’exemple suivant, nous allons vérifier que l’élément <a id="Anchor Id" href="#">Click Here</a> existe dans le DOM.

<html>
    <body>
        <a id="Anchor Id" href="#">Click Here</a>
        <script>
            var testData = document.getElementById("Anchor Id");
            console.log(testData);
        </script>
    </body>
</html>

Production :

<a id="Anchor Id" href="#">Click Here</a>

Si nous voulons renvoyer la valeur comme booléen au lieu de l’élément renvoyé, nous pouvons ajouter un !! avant notre document.getElementById("Anchor Id");.

<html>
    <body>
        <a id="Anchor Id" href="#">Click Here</a>
        <script>
            var testData = !!document.getElementById("Anchor Id");
            console.log("Is Not null?",testData);
        </script>
    </body>
</html>

Production :

Is Not null? true

Utilisez le getElementsByClassName pour vérifier l’existence d’un élément dans le DOM

De même que nous utilisons la fonction getElementById() pour trouver l’élément en utilisant son Id, nous avons aussi beaucoup d’autres fonctions qui effectuent la même opération avec des critères différents comme getElementsByClassName(), getElementsByName() et, getElementsByTagName().

La fonction getElementsByClassName() est utilisée pour trouver l’élément dans le DOM en utilisant son nom de classe. Un exemple de la valeur du nom de classe est ClassExample dans l’élément <a class="ClassExample"></a>. Il retournera un ou plusieurs éléments si un élément est trouvé ou null si l’élément n’existe pas.

Voyons l’exemple suivant de la fonction getElementByClassName() :

<html>
    <body>
        <a class="ClassExample" href="#">Click Here for the class example </a>
        <script>
            var classname = document.getElementsByClassName("ClassExample");
            var classnameExists = !!document.getElementsByClassName("ClassExample");

            console.log("Element :",classname);
            console.log("Is Not null ? ",classnameExists);
        </script>
    </body>
</html>

Production :

Element : HTMLCollection [a.ClassExample]
Is Not null ?  true

Nous pouvons également utiliser le signe !! avant la fonction getElementsByClassName() pour taper cast le résultat en valeur booléenne, où il retournera true s’il a une valeur, et false s’il retournera null.

Utilisez la fonction getElementsByName pour vérifier l’existence d’un élément dans DOM

La fonction getElementsByName() est utilisée pour trouver tout élément dans DOM par son nom, Le Name de l’élément a la valeur de ElementNameHolder dans l’élément <a name="ElementNameHolder"></a>. Voyons l’exemple suivant :

<html>
    <body>
        <a class="ClassExample" name="ElementNameHolder" href="#">Click Here for the class example </a>
        <script>
            var EleName = document.getElementsByName("ElementNameHolder");
            var elementNameExists = !!document.getElementsByName("ElementNameHolder");

            console.log("Element :",EleName);
            console.log("Is Not null ? ",elementNameExists);
        </script>
    </body>
</html>

Production :

Element : NodeList [a]
Is Not null ? true

Utilisez le getElementsByTagName pour vérifier l’existence d’un élément dans le DOM

La fonction getElementsByTagName() peut renvoyer tous les éléments avec le tagName spécifié dans DOM. Le retour de la fonction peut être un ou plusieurs éléments ou null si aucun élément n’est trouvé.

L’exemple suivant montre comment vérifier si l’élément requis existe ou non dans le DOM.

<html>
    <body>
        
        <exampleTag>
            <a name="ElementNameHolder1" href="#">Click Here for the tag name example 1 </a>
        </exampleTag>
        
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Click Here for the tag name example 2 </a>
        </exampleTag>
        
        <script>
            var EleTagName = document.getElementsByTagName("exampleTag");
            
            console.log("Element 1 :",EleTagName[0].innerHTML);
            console.log("Element 2 :",EleTagName[1].innerHTML);
        </script>
    </body>
</html>

Production :

Element 1 : 
            <a name="ElementNameHolder1" href="#">Click Here for the tag name example 1 </a>
        
Element 2 : 
            <a name="ElementNameHolder2" href="#">Click Here for the tag name example 2 </a>

Utilisez la fonction contains() pour vérifier l’existence d’un élément dans le DOM visible

Si nous voulons vérifier l’existence d’un élément dans le DOM visible, nous pouvons utiliser document.body.contains() qui recherchera dans le DOM visible l’élément que nous envoyons dans son premier argument.

La fonction contains() ne reçoit qu’un seul noeud, donc lorsque nous récupérons des noeuds en utilisant l’une des fonctions document.getElementsByTagName ou document.getElementsByName, nous devons sélectionner un seul élément à envoyer, car ces fonctions renvoient tous les éléments trouvés qui correspondent aux critères de sélection.

<html>
    <body>
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 1</a>
            <a id="ElementId1" href="#">Tag, Name, Id in visible DOM example 2</a>
        </exampleTag>
        
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 3</a>
            <a id="ElementId2" href="#">Tag, Name, Id in visible DOM example 4</a>
        </exampleTag>
        
        <script>
            var EleTagName = document.getElementsByTagName("exampleTag");

            let myVar1 = document.body.contains(document.getElementsByTagName("exampleTag")[0]);
            let myVar2 = document.body.contains(document.getElementsByName("ElementNameHolder2")[0]);
            let myVar3 = document.body.contains(document.getElementById("ElementId2"));
            console.log("Element 1 :",EleTagName[0].innerHTML);
            console.log("Element 2 :",EleTagName[1].innerHTML);
        </script>
    </body>
</html>

Element 1 : 
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 1</a>
            <a id="ElementId1" href="#">Tag, Name, Id in visible DOM example 2</a>
        
Element 2 : 
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 3</a>
            <a id="ElementId2" href="#">Tag, Name, Id in visible DOM example 4</a>

Article connexe - JavaScript DOM