Como selecionar um elemento com JavaScript

Neste artigo vamos aprender como selecionar um elemento com JavaScript, todas as formas possíveis e os casos de uso para cada uma.

Veja este conteúdo em vídeo:

E aí, programador(a), bora aprender coisa nova?

No JavaScript temos diversas formas de selecionar um elemento

Isso para cobrir as muitas possibilidades de elementos que o HTML pode conter, então se torna muito útil

Podemos selecionar elemento por id, classe, tag e até por seletores de CSS, legal né?

Antes de mais nada é importante que essas são formas de selecionar são baseadas em métodos, ou seja, funções que o JavaScript já nos dá por padrão

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Além disso, todas estas funções estão no document

Vamos ver cada um dos casos:

// Selecionar por ID
let el = document.getElementById("idDoElemento");

// Selecionar por classe
let els = document.getElementsByClassName("classeDosElementos");

// Selecionar por tag
let els = document.getElementsByTagName("tagDosElementos");

// Selecionar elementos por seletor de CSS
let el = document.querySelector("seletorCSS");
let els = document.querySelectorAll("seletoresCSS");

Estas são as possibilidades que temos, e já abrangem 100% dos casos

Temos algumas diferenças importantes nestes métodos, que é interessante citar

Os métodos que pegam apenas um único elemento são: getElementById e querySelector

Os métodos: getElementsByTagName, getElementsByClassName, querySelectorAll vão pegar todos os elementos que correspondem ao seletor passado

Perceba o elementS e o All, ambos indicam que estes métodos retornam conjuntos

E um outro detalhe é que no querySelector e querySelectorAll, nós utilizamos seletores de CSS igual os da folha de estilo, por exemplo:

Classes: .classe
ID: #id
Seletor complexo: .container .item

Ou seja, devemos digitar o # para id e o . para classe!

Já nos outros métodos não, apenas o nome da tag, classe ou ID

Conclusão

No JavaScript temos diversas maneira de selecionar elementos, isso para que todos os casos de elementos do HTML sejam selecionáveis

Então quando precisamos selecionar um elemento por ID, utilizamos o método getElementById

Se for por classe o getElementsByClassName e tags por getElementsByTagName (seletores que selecionam mais de um elemento)

E se desejarmos selecionar por seletores de CSS, temos duas possibilidades: querySelector (um elemento) e querySelectorAll (mais de um elemento)