🧠 RECURSOS

🌲 D.O.M. - Document Object Model

window: É o objeto raiz. Com duas funções:
- Objeto global para código JavaScript;
- Representa a "janela do navegador" e fornece métodos para controlá-la.
DOM: O Modelo de Objeto do Documento representa todo o conteúdo da página como objetos que podem ser modificados.
- O objeto document é o principal "ponto de entrada" da página. Podemos alterar ou criar qualquer coisa na página usando-o.
BOM: O Modelo de Objeto do Navegador representa objetos adicionais fornecidos pelo navegador (ambiente host) para trabalhar com tudo, exceto o documento.

🌳 A árvore de objetos do DOM

Tipos de “nós”: folhas; atributos e texto

⏩ Processo

O acesso e atualização da árvore DOM envolve duas etapas:

Localizar o nó que representa o elemento com o qual você deseja trabalhar.
Usar seu conteúdo de texto, elementos filhos e atributos.

🔎 Acessando os elementos

Método	Descrição	Retorno
`document.getElementById()`	Seleciona por ID único	Elemento único
`document.querySelector()`	Seleciona por seletor CSS	Primeiro elemento
`document.querySelectorAll()`	Seleciona todos por seletor CSS	NodeList
`document.getElementsByClassName()`	Por classe	HTMLCollection
`document.getElementsByTagName()`	Por tag	HTMLCollection

<aside> 💡

NodeList vs HTMLCollection:

NodeList aceita métodos de array como forEach
HTMLCollection é mais limitada (converta para array com Array.from() se necessário) </aside>

Exemplos

getElementById

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // get the element
  let elem = document.getElementById('elem');

  // make its background red
  elem.style.background = 'red';
</script>

getElementsByTagName

<ul>
  <li>Maçã</li>
  <li>Banana</li>
  <li>Cereja</li>
</ul>

<script>
  const fruits = document.**getElementsByTagName**('li');

  // 1) Acessando com .item()
  fruits.item(0).style.color = 'red';     // Maçã fica vermelha

  // 2) Acessando com a notação [n]
  fruits[1].style.color = 'green';        // Banana fica verde
</script>