4 - Obtendo Elementos HTML do DOM

Vamos começar com uma página HTML simples de onde obteremos elementos específicos através de cada um dos métodos disponíveis:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Obtendo Elementos HTML do DOM</title>
  <script src="./index.js"></script>
</head>
<body>
  <h1>Obtendo Elementos HTML do DOM</h1>

  <h2>Contatos</h2>
  
  <ul id="contact-list">
    <li>
      <label for="contact1">Contato 1</label>
      <input type="text" id="contact1" name="contact1" class="contact-input">
    </li>
    <li>
      <label for="contact2">Contato 2</label>
      <input type="text" id="contact2" name="contact2" class="contact-input">
    </li>
    <li>
      <label for="contact3">Contato 3</label>
      <input type="text" id="contact3" name="contact3" class="contact-input">
    </li>
    <button onclick="show()">
      Exibir
    </button>
  </ul>
</body>
</html>

No javascript, através da função show() que será executada ao clicar no botão, podemos obter um elemento do DOM através do id:

function show() {
  // Obter um elemento único a partir do seu id
  const contactList = document.getElementById("contact-list")
  console.log(contactList)
}

Também podemos obter elementos a partir de um nome de tag:

function show() {
  // ...

  // Obter vários elementos (HTMLCollection) a partir de um nome de tag
  const liElements = document.getElementsByTagName("li")
  console.log(liElements)
}

E também a partir de uma class:

function show() {
  // ...

  // Obter vários elementos (HTMLCollection) a partir de uma classe
  const contactInputs = document.getElementsByClassName("contact-input")
  console.log(contactInputs)
}

Podemos obter uma lista de elementos a partir do atributo name:

function show() {
  // ...

  // Obter vários elementos (NodeList) a partir do atributo name
  const contact1 = document.getElementsByName("contact1")
  console.log(contact1)
}

E o método mais flexível de todos, através de uma query (semelhante ao que fazemos com o CSS):

function show() {
  // ...

  // Obter vários elementos (NodeList) a partir de uma query (semelhante aos seletores do CSS)
  const contacts = document.querySelectorAll("#contact-list > li > label")
  console.log(contacts)
}

Além disso, também é possível obter um único elemento através de uma query. O comportamento é igual ao do querySelectorAll(), porém selecionando o primeiro elemento que corresponder à query:

Obs.: Repare que também podemos acessar propriedade internas do elemento obtido.
```
function show() {
  // ...

  // Obter um elemento a partir de uma query (o primeiro elemento a corresponder)
  const contact = document.querySelector("#contact-list > li > label")
  console.log(contact)
  console.log(contact.textContent)
}
```