O que é o DOM e como você acessa elementos?

Vamos aprender sobre o DOM e por que ele é tão importante para o desenvolvimento web. DOM significa Document Object Model. É uma interface de programação que nos permite interagir com documentos HTML. Com o DOM, você pode adicionar, modificar ou excluir elementos em uma página da web. Você pode até tornar seu site interativo fazendo com que os elementos escutem e respondam a eventos. No DOM, um documento HTML é representado como uma árvore de nós. Cada nó de elemento representa um elemento HTML do documento HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>What is the DOM?</h1>
    <h2>Let's learn about the DOM</h2>
  </body>
</html>

Este é um diagrama que representa a estrutura básica do DOM do nosso exemplo:

Document
========

HTML
-----


Head
Title
Body
H1
H2

Claro, isso pode ser mais detalhado e complexo com base na estrutura da marcação HTML de uma página da web. O documento HTML é o nó raiz na hierarquia do DOM. Ele tem um nó filho, o elemento html. Este é o elemento raiz do documento HTML, já que todos os outros nós descendem dele. O elemento html tem dois filhos: head e body. O elemento head contém metadados sobre o documento. Ele fornece informações essenciais sobre a página da web. O elemento body contém o conteúdo visível da página web. Você pode acessar esses elementos com JavaScript, trabalhar com eles no seu código e até modificá-los dinamicamente. Esse é o poder do DOM e das APIs web. Para acessar esses elementos em JavaScript, você pode usar os métodos getElementById() e querySelector(). Esses métodos são APIs web porque fornecem maneiras padronizadas de interagir com o DOM usando JavaScript. Com getElementById(), você pode obter um objeto que representa o elemento HTML com o id especificado. Lembre-se de que os ids devem ser únicos em todo documento HTML, então este método retornará apenas um objeto Element. Aqui você pode ver um exemplo:

const container = document.getElementById("container");

Esta linha de código JavaScript obtém um elemento com o valor id de container e atribui esse objeto a uma constante JavaScript. Você deve passar o id entre aspas como argumento. Se você registrar este objeto no console, você o verá na saída:

<div id="container">
  <h1>Hello, World!</h1>
  <p>Welcome to learning about the DOM.</p>
</div>
<script src="index.js"></script>

const container = document.getElementById("container");
console.log(container);

querySelector() é mais abrangente do que getElementById(). Com querySelector(), você pode obter o primeiro elemento no documento HTML que corresponde ao seletor CSS passado como argumento. Neste exemplo, você obterá o elemento que corresponde ao seletor section:

<section>
  <h2>Section Title</h2>
  <p>This is a section of the webpage.</p>
</section>
<script src="index.js"></script>

const sectionEl = document.querySelector("section");
console.log(sectionEl);

Se você quiser selecionar um elemento pelo nome da sua classe usando querySelector(), você precisa prefixar o nome da classe com um ponto (.). Aqui está um exemplo:

<link rel="stylesheet" href="styles.css">
<div class="highlight">
  <p>This content is highlighted.</p>
</div>
<script src="index.js"></script>

body {
  background-color: lightgray;
}

.highlight {
  background-color: yellow;
}

const highlightEl = document.querySelector(".highlight");
console.log(highlightEl);

Você também tem outros métodos para corresponder a múltiplos elementos, como getElementsByClassName() e querySelectorAll(). Você aprenderá mais sobre eles em lições futuras. Ao entender como usar as web APIs para manipular o DOM de forma eficiente, você pode criar aplicações web poderosas e interativas.

Este módulo não possui perguntas. Marque como concluído.

O que é o DOM e como você acessa elementos?

Concluído!