logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

Outros métodos getElement

Até este momento utilizamos apenas o método getElementById para selecionar elementos html da página. Vamos agora conhecer outros métodos comuns.

getElementsByClassName

Pelo nome deste método é fácil supor o que ele faz, seleciona elementos que tenham uma classe específica. Diferentemente dos ids, que só podem pertencer a um elemento na página, uma classe pode ser compartilhada por vários elementos, por isso este método retornará um array composto por vários objetos, também chamados de nós (nodes). Cada objeto é um elemento html que possui a classe selecionada.

                    

    <div class="exemplo">Elemento 1</div>
    <div class="exemplo">Elemento 2</div>
    <div class="exemplo">Elemento 3</div>

                    
                
Elemento 1
Elemento 2
Elemento 3
                    
    var elementos = document.getElementsByClassName("exemplo");
    console.log(elementos);

    // O console retornará um array: [ {...}, {...}, {...} ]
    // Cada um destes objetos é um dos elementos que possuem a classe "exemplo".

                    
                

Os objetos deste array podem ser acessados por meio do índice, neste caso [0], [1] e [2]. Para alterar as suas propriedades, como a innerHTML, ou as propriedades css, é preciso definir o índice:

                    
    
    elementos[0].innerHTML = "Texto do elemento 1";

                    
                

getElementsByTagName

O funcionamento deste método é muito parecido com o anterior, mas em vez de selecionar classes, este seleciona elementos com uma tag específica (como div, h1, p, img, etc).

                    

    <p>Parágrafo 1</p>
    <p>Parágrafo 2</p>
    <p>Parágrafo 3</p>

                    
                

Parágrafo 1

Parágrafo 2

Parágrafo 3

                    
    var paragrafos = document.getElementsByTagName("p");
    console.log(paragrafos);

    // O console retornará um array: [ {...}, {...}, {...} ]
    // Cada um destes objetos é um dos elementos do tipo <p>.

                    
                

Índice de Aulas