Controlla se l'elemento esiste in DOM in JavaScript

  2. HowTo
  3. Howtos JavaScript
  4. Controlla se l'elemento esiste in DOM in …
Moataz Farid 10 aprile 2021
JavaScript JavaScript DOM
  1. Utilizza getElementById() per verificare l’esistenza dell’elemento in DOM
  2. Utilizza getElementsByClassName per verificare l’esistenza di un elemento in DOM
  3. Utilizza getElementsByName per verificare l’esistenza di un elemento in DOM
  4. Utilizza getElementsByTagName per verificare l’esistenza di un elemento in DOM
  5. Utilizza contains() per verificare l’esistenza di un elemento nel DOM visibile
Controlla se l'elemento esiste in DOM in JavaScript

Questo articolo spiegherà come possiamo verificare l’esistenza di un elemento nel DOM con metodi differenti.

Utilizza getElementById() per verificare l’esistenza dell’elemento in DOM

Possiamo usare la funzione getElementById per verificare se un elemento esiste in DOM usando l’Id dell’elemento. Nel seguente esempio verificheremo che l’elemento <a id="Anchor Id" href="#">Click Here</a> esista in DOM.

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

Produzione:

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

Se vogliamo restituire il valore come booleano invece dell’elemento restituito possiamo aggiungere un !! prima del nostro 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>

Produzione:

Is Not null? true

Utilizza getElementsByClassName per verificare l’esistenza di un elemento in DOM

Simile a quello che usiamo la funzione getElementById() per trovare l’elemento usando il suo Id, abbiamo anche molte altre funzioni che eseguono la stessa operazione con criteri deffrernt come getElementsByClassName(), getElementsByName() e getElementsByTagName().

La funzione getElementsByClassName() è usata per trovare l’elemento nel DOM usando il suo nome di classe. Un esempio del valore del nome della classe è ClassExample nell’elemento <a class="ClassExample"></a>. Restituirà uno o più elementi se viene trovato un elemento o null se l’elemento non esiste.

Vediamo il seguente esempio della funzione 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>

Produzione:

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

Possiamo anche usare il segno !! prima della funzione getElementsByClassName() per digitare cast il risultato in un valore booleano, dove restituirà true se ha un valore e false se restituirà null.

Utilizza getElementsByName per verificare l’esistenza di un elemento in DOM

La funzione getElementsByName() è usata per trovare qualsiasi elemento in DOM in base al suo nome, il Name dell’elemento ha il valore di ElementNameHolder nell’elemento <a name="ElementNameHolder"></a>. Vediamo il seguente esempio:

<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>

Produzione:

Element : NodeList [a]
Is Not null ? true

Utilizza getElementsByTagName per verificare l’esistenza di un elemento in DOM

La funzione getElementsByTagName() può restituire tutti gli elementi con il tagName specificato in DOM. Il ritorno della funzione può essere uno o più elementi o null se non viene trovato alcun elemento.

Il seguente esempio mostra come controllare se l’elemento richiesto esiste o meno in 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>

Produzione:

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>

Utilizza contains() per verificare l’esistenza di un elemento nel DOM visibile

Se vogliamo controllare l’esistenza di un elemento nel DOM visibile, possiamo usare document.body.contains() che cercherà nel DOM visibile l’elemento che inviamo nel suo primo argomento.

La funzione contiene() riceve solo un nodo, quindi quando recuperiamo i nodi utilizzando una delle funzioni document.getElementsByTagName o document.getElementsByName, dobbiamo selezionare solo un elemento da inviare, poiché quelle funzioni restituiscono tutti gli elementi trovato che corrisponde ai criteri di selezione.

<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>

Articolo correlato - JavaScript DOM