Busca de Elementos em Páginas Web com JavaScript

O objeto document oferece vários métodos para buscar e manipular elementos em páginas web:

getElementById(value): seleciona o elemento cujo atributo id é igual a value. Se não houver um elemento com esse identificador, retorna null.
getElementsByTagName(value): seleciona todos os elementos cuja tag é igual a value. Retorna uma lista de elementos (tipo NodeList), que é semelhante a um array.
getElementsByClassName(value): seleciona todos os elementos que têm a classe value. Retorna uma lista NodeList.
getElementsByName(value): seleciona todos os elementos cujo nome é value. Retorna uma lista NodeList.
querySelector(value): seleciona o primeiro elemento que corresponde ao seletor CSS value.
querySelectorAll(value): seleciona todos os elementos que correspondem ao seletor CSS value. Retorna uma lista NodeList.

Obtendo elementos por id

Por exemplo, vamos encontrar um elemento pelo id:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <h1 id="header">Página Inicial</h1>
    <script>
      const headerElement = document.getElementById("header");
      console.log("Texto: ", headerElement.innerText); // Texto:  Página Inicial
    </script>
  </body>
</html>

Usando a chamada document.getElementById("header"), encontramos o elemento com id="header". Com a propriedade innerText, podemos obter o texto do elemento encontrado.

É importante observar que se o elemento não for encontrado, o método retorna null. Portanto, é recomendável verificar se o elemento é null antes de usá-lo.

Busca por uma tag específica

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <h1>Página Inicial</h1>
    <p>Primeiro parágrafo</p>
    <p>Segundo parágrafo</p>
    <script>
      const paragraphs = document.getElementsByTagName("p");

      for (const p of paragraphs) {
        console.log(p.innerText); // exibindo o texto do parágrafo
      }
    </script>
  </body>
</html>

Usando a chamada document.getElementsByTagName("p"), encontramos todos os elementos de parágrafos. Esta chamada retorna uma lista do tipo NodeList, que é muito semelhante a um array e contém os elementos encontrados. Para obter elementos individuais desta lista, pode-se percorrer a lista em um loop.

Saída do console:

Primeiro parágrafo
Segundo parágrafo

Se precisarmos obter apenas o primeiro elemento, podemos acessar o primeiro elemento da coleção encontrada:

const p = document.getElementsByTagName("p")[0];
console.log(p.innerText);

Se não houver elementos com a tag especificada na página, um lista vazia é retornada. Usando a propriedade length, como no caso de arrays, podemos verificar o número de elementos encontrados:

const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // Exibe o número de parágrafos encontrados

Para percorrer a lista, naturalmente podemos usar outros tipos de loops:

const paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
  console.log(paragraphs[i].innerText);
}

Obtendo elementos por classe

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <h1>Página Inicial</h1>
    <p class="text">Texto da Página</p>
    <p class="contacts">Email: supercorp@gmail.com</p>
    <p class="contacts">Telefone: +1-234-567-8901</p>
    <script>
      const contacts = document.getElementsByClassName("contacts");

      for (const contact of contacts) {
        console.log(contact.innerText);
      }
    </script>
  </body>
</html>

Neste caso, selecionamos todos os elementos com a classe "contacts".

Saída do console:

Email: supercorp@gmail.com
Telefone: +1-234-567-8901

Obtendo elementos pelo Atributo name

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <form>
      <p>Idioma:</p>
      <input type="radio" name="lang" value="Java" />
      <label>Java</label>
      <br />
      <input type="radio" name="lang" value="JavaScript" checked />
      <label>JavaScript</label>
      <br />
      <input type="radio" name="lang" value="PHP" />
      <label>PHP</label>
      <br />
    </form>
    <script>
      const langs = document.getElementsByName("lang");
      for (const lang of langs) {
        console.log(lang.value); // obtendo o valor do atributo value
      }
    </script>
  </body>
</html>

Neste caso, selecionamos todos os elementos cujo atributo name é igual a "lang". No exemplo acima, são botões de rádio. Em seguida, imprimimos o valor do atributo value de cada elemento obtido. Saída do console:

Java
JavaScript
PHP

Vale ressaltar que este método pode funcionar de maneira um pouco diferente em navegadores antigos como o Internet Explorer ou Opera. Em particular, ele seleciona um elemento se o seu atributo name corresponde ao valor fornecido, assim como o atributo id.

Buscando Elementos por Seletor CSS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <div class="annotation">
      <p>Anotação do Artigo</p>
    </div>
    <div class="text">
      <p>Primeiro parágrafo</p>
      <p>Segundo parágrafo</p>
    </div>
    <script>
      const elem = document.querySelector(".annotation p");
      console.log(elem.innerText); // Anotação do Artigo
    </script>
  </body>
</html>

A expressão document.querySelector(".annotation p") encontra o elemento que corresponde ao seletor .annotation p. Se houver vários elementos correspondentes ao seletor na página, o método escolherá o primeiro deles.

Para obter todos os elementos por um seletor, pode-se usar de forma semelhante o método document.querySelectorAll, que retorna uma lista NodeList dos elementos encontrados:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <div class="annotation">
      <p>Anotação do Artigo</p>
    </div>
    <div class="text">
      <p>Primeiro parágrafo</p>
      <p>Segundo parágrafo</p>
    </div>
    <script>
      const elements = document.querySelectorAll(".text p");
      for (const elem of elements) {
        console.log(elem.innerText);
      }
    </script>
  </body>
</html>

Saída do console:

Primeiro parágrafo
Segundo parágrafo

Buscando em Elementos Aninhados

De forma semelhante, podemos buscar elementos não apenas em todo o documento, mas também em elementos específicos em uma página da web. Por exemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <div id="article">
      <h1 id="header">Página Inicial</h1>
      <p class="text">Texto da Página 1</p>
      <p class="text">Texto da Página 2</p>
    </div>
    <div id="footer">
      <p class="text">Texto do Rodapé</p>
    </div>
    <script>
      // obtemos o elemento com id="article"
      const article = document.getElementById("article");
      // neste elemento, obtemos todos os elementos com class="text"
      const articleContent = article.getElementsByClassName("text");
      for (const p of articleContent) {
        console.log(p);
      }
    </script>
  </body>
</html>

Neste caso, primeiro obtemos o elemento com id="article", depois, dentro desse elemento, buscamos todos os elementos com a classe "text". Como resultado, o console exibirá dois elementos:

Texto da Página 1
Texto da Página 2

Seletores CSS

Segue uma lista resumida dos seletores CSS básicos que podemos usar para buscar elementos:

*: seleciona todos os elementos
E: seleciona todos os elementos do tipo E
[a]: seleciona todos os elementos com o atributo a
[a="b"]: seleciona todos os elementos nos quais o atributo a tem o valor b
[a~="b"]: seleciona todos os elementos nos quais o atributo a tem uma lista de valores, e um desses valores é b
[a^="b"]: seleciona todos os elementos nos quais o valor do atributo a começa com b
[a$="b"]: seleciona todos os elementos nos quais o valor do atributo a termina com b
[a*="b"]: seleciona todos os elementos nos quais o valor do atributo a contém a substring b
[a|="b"]: seleciona todos os elementos nos quais o valor do atributo a é uma série de valores separados por hífens, e o primeiro desses valores é b
:root: seleciona o elemento raiz do documento
:nth-child(n): seleciona o n-ésimo elemento filho (a contagem começa do início)
:nth-last-child(n): seleciona o n-ésimo elemento filho (a contagem começa do fim)
:nth-of-type(n): seleciona o n-ésimo elemento irmão do tipo type (a contagem começa do início)
:nth-last-of-type(n): seleciona o n-ésimo elemento irmão do tipo type (a contagem começa do fim)
:first-child: seleciona o primeiro elemento filho
:last-child: seleciona o último elemento filho
:first-of-type: seleciona o primeiro elemento irmão do tipo type
:last-of-type: seleciona o último elemento irmão do tipo type
:only-child: seleciona todos os elementos que têm apenas um elemento filho
:only-of-type: seleciona todos os elementos irmãos do tipo type
:empty: seleciona todos os elementos que não têm elementos filhos
:link: seleciona todos os links que ainda não foram clicados
:visited: seleciona todos os links que já foram visitados
:active: seleciona todos os links que estão sendo clicados no momento
:hover: seleciona todos os links sob os quais o cursor está no momento
:focus: seleciona todos os elementos que estão focados no momento
:target: seleciona todos os elementos que podem ser referenciados com URLs dentro da página
:lang(en): seleciona todos os elementos onde o atributo lang é "en"
:enabled: seleciona todos os elementos de formulários que estão habilitados
:disabled: seleciona todos os elementos de formulários que estão desabilitados
:checked: seleciona todos os checkboxes e botões de rádio que estão marcados
.class: seleciona todos os elementos com a classe class
#id: seleciona todos os elementos com o identificador id
:not(s): seleciona todos os elementos que não correspondem ao seletor s
E F: seleciona todos os elementos do tipo F que são descendentes de elementos do tipo E
E > F: seleciona todos os elementos do tipo F que são filhos diretos de elementos do tipo E
E + F: seleciona todos os elementos do tipo F que estão imediatamente após um elemento do tipo E
E ~ F: seleciona todos os elementos do tipo F que são irmãos de um elemento do tipo E

Observações Adicionais

É importante notar que dentre todos esses métodos, a busca por id geralmente é a mais rápida. Em todas as outras condições, é melhor escolher o método getElementById().

Também para otimização do trabalho com o DOM, a fim de evitar a repetição da seleção dos mesmos elementos, é melhor salvar os elementos selecionados em constantes/variáveis na primeira seleção.

Vários métodos - getElementsByTagName(), getElementsByClassName(), getElementsByName(), querySelectorAll() - retornam uma lista de elementos na forma de um objeto NodeList, que é semelhante a um array e que podemos iterar para obter cada elemento individualmente. No entanto, o método querySelectorAll() retorna uma lista NodeList estática, enquanto os outros métodos retornam uma lista dinâmica. A diferença está em como as alterações aos elementos na lista dinâmica são imediatamente aplicadas à página web, enquanto as alterações na lista estática podem não ser imediatamente visíveis.