Verifique se o elemento existe no DOM em JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Verifique se o elemento existe no DOM em …
Moataz Farid 30 janeiro 2023
JavaScript JavaScript DOM
  1. Use o getElementById() para verificar a existência do elemento em DOM
  2. Use o getElementsByClassName para verificar a existência de um elemento em DOM
  3. Use o getElementsByName para verificar a existência de um elemento em DOM
  4. Use o getElementsByTagName para verificar a existência de um elemento em DOM
  5. Use contains() para verificar a existência de um elemento no DOM visível
Verifique se o elemento existe no DOM em JavaScript

Este artigo irá explicar como podemos verificar a existência de um elemento no DOM com diferentes métodos.

Use o getElementById() para verificar a existência do elemento em DOM

Podemos usar a função getElementById para verificar se existe um elemento no DOM usando o Id do elemento. No exemplo a seguir, verificaremos se o elemento <a id="Anchor Id" href="#">Click Here</a> existe em DOM.

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

Resultado:

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

Se quisermos retornar o valor booleano em vez do elemento retornado, podemos adicionar um !! antes de nosso 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>

Resultado:

Is Not null? true

Use o getElementsByClassName para verificar a existência de um elemento em DOM

Semelhante a que usamos a função getElementById() para encontrar o elemento usando seu Id, também temos muitas outras funções que executam a mesma operação com critérios deffrernt como getElementsByClassName(), getElementsByName() e getElementsByTagName().

A função getElementsByClassName() é usada para encontrar o elemento no DOM usando seu nome de classe. Um exemplo para o valor do nome da classe é ClassExample no elemento <a class="ClassExample"></a>. Ele retornará um ou mais elementos se algum elemento for encontrado ou null se o elemento não existir.

Vejamos o seguinte exemplo da função 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>

Resultado:

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

Também podemos usar o sinal !! antes da função getElementsByClassName() para digitar lançar o resultado para o valor booleano, onde retornará true se tiver algum valor e false se retornar null.

Use o getElementsByName para verificar a existência de um elemento em DOM

A função getElementsByName() é usada para encontrar qualquer elemento em DOM por seu nome, O Name do elemento tem o valor de ElementNameHolder no elemento <a name="ElementNameHolder"></a>. Vejamos o seguinte exemplo:

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

Resultado:

Element : NodeList [a]
Is Not null ? true

Use o getElementsByTagName para verificar a existência de um elemento em DOM

A função getElementsByTagName() pode retornar todos os elementos com o tagName especificado em DOM. O retorno da função pode ser um ou mais elementos ou null se nenhum elemento for encontrado.

O exemplo a seguir mostra como verificar se o elemento necessário existe em DOM ou não.

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

Resultado:

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>

Use contains() para verificar a existência de um elemento no DOM visível

Se quisermos verificar a existência de um elemento no DOM visível, podemos usar document.body.contains() que pesquisará no DOM visível o elemento que enviamos em seu primeiro argumento.

A função contains() recebe apenas um nó, então quando recuperamos nós usando qualquer uma das funções document.getElementsByTagName ou document.getElementsByName, precisamos selecionar apenas um elemento para enviar, pois essas funções retornam todos os elementos encontrados que correspondem aos critérios de seleção.

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

Artigo relacionado - JavaScript DOM