Como Encontrar Um Elemento Com Javascript Puro

Mais um post sobre Javascript puro, hoje irei falar um pouco sobre como podemos encontrar um elemento no DOM utilizando o nosso querido Javascript!
Com o Javascript, podemos encontrar um elemento seja pela classe, elemento, por id!

Sem a necessidade de adicionarmos uma biblioteca externa para fazer uma manipulação tão simples quanto essa, veja como é simples:

Encontrar um elemento pela classe

Para encontrarmos um elemento pela classe, podemos fazer de duas formas:

1
2
3
4
document.querySelectorAll(".class");

// OU
document.getElementsByClassName("class");

Encontrar um elemento pelo ID

Agora, para encontrarmos um elemento pelo ID, podemos fazer de três formas diferentes, sendo a terceira pouco conhecida!

1
2
3
4
5
6
7
document.querySelector("#id");

// OU
document.getElementById("id");

// OU
window["id"];

A diferença entre querySelectorAll e as outras opções é que o querySelectorAll retorna todos os elementos que correspondem com aquilo que está procurando, como uma lista!
E também, por ser uma busca mais ampla, ele acaba sendo mais lento do que as outroas opções.
Então, caso performance seja algo que esteja buscando, recomendo que sempre opte por document.getElementById, document.getElementsByClassName ou document.getElementsByTagName