Comprobar si el elemento existe en el DOM en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Comprobar si el elemento existe en el …
Moataz Farid 30 enero 2023
JavaScript JavaScript DOM
  1. Utilizar la función getElementById() para comprobar la existencia de un elemento en el DOM
  2. Usar el getElementsByClassName para comprobar la existencia de un elemento en la DOM
  3. Utilizar la función getElementsByName para comprobar la existencia de un elemento en la DOM
  4. Utilizar la función getElementsByTagName para comprobar la existencia de un elemento en la DOM
  5. Utilizar la función contains() para comprobar la existencia de un elemento en la DOM visible
Comprobar si el elemento existe en el DOM en JavaScript

Este artículo explicará cómo podemos comprobar la existencia de un elemento en el DOM con diferentes métodos.

Utilizar la función getElementById() para comprobar la existencia de un elemento en el DOM

Podemos utilizar la función getElementById para verificar si un elemento existe en la DOM utilizando el Id del elemento. En el siguiente ejemplo comprobaremos que el elemento <a id="Anchor Id" href="#">Click Here</a> existe en el DOM.

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

Producción :

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

Si queremos devolver el valor como booleano en lugar del elemento devuelto podemos añadir un !! antes de nuestro 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>

Producción :

Is Not null? true

Usar el getElementsByClassName para comprobar la existencia de un elemento en la DOM

Al igual que usamos la función getElementById() para encontrar el elemento usando su Id, también tenemos muchas otras funciones que realizan la misma operación con criterios distintos como getElementsByClassName(), getElementsByName() y getElementsByTagName().

La función getElementsByClassName() se utiliza para encontrar el elemento en la DOM utilizando su nombre de clase. Un ejemplo del valor del nombre de la clase es ClassExample en el elemento <a class="ClassExample"></a>. Devolverá uno o más elementos si se encuentra algún elemento o null si el elemento no existe.

Veamos el siguiente ejemplo de la función 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>

Producción :

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

También podemos utilizar el signo !! antes de la función getElementsByClassName() para tipar el resultado a valor booleano, donde devolverá true si tiene algún valor, y false si devolverá null.

Utilizar la función getElementsByName para comprobar la existencia de un elemento en la DOM

La función getElementsByName() se utiliza para encontrar cualquier elemento en la DOM por su nombre, El Name del elemento tiene valor de ElementNameHolder en el elemento <a name="ElementNameHolder"></a>. Veamos el siguiente ejemplo:

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

Producción :

Element : NodeList [a]
Is Not null ? true

Utilizar la función getElementsByTagName para comprobar la existencia de un elemento en la DOM

La función getElementsByTagName() puede devolver todos los elementos con el tagName especificado en la DOM. El retorno de la función puede ser uno o más elementos o null si no se encuentra ningún elemento.

El siguiente ejemplo muestra cómo comprobar si el elemento requerido existe en el DOM o no.

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

Producción :

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>

Utilizar la función contains() para comprobar la existencia de un elemento en la DOM visible

Si queremos comprobar la existencia de un elemento en la DOM visible, podemos utilizar document.body.contains() que buscará en la DOM visible el elemento que enviemos en su primer argumento.

La función contains() sólo recibe un nodo, por lo que cuando recuperamos nodos utilizando cualquiera de las funciones document.getElementsByTagName o document.getElementsByName, tenemos que seleccionar sólo un elemento para enviar, ya que esas funciones devuelven todos los elementos encontrados que coinciden con los criterios de selección.

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

Artículo relacionado - JavaScript DOM