Manipulação do DOM (Document Object Model)

Seja bem-vindo ao módulo 3! Nesta jornada, você desvendará os segredos da manipulação do DOM (Document Object Model) em JavaScript, abrindo um mundo de possibilidades para interagir com elementos HTML e criar interfaces dinâmicas e interativas.

Prepare-se para aprender como acessar, modificar e adicionar elementos à página web, criando experiências de usuário mais ricas e personalizadas.

Introdução

O DOM (Document Object Model) é uma representação em forma de árvore da estrutura HTML de uma página da web.

A manipulação do DOM é essencial para interagir com os elementos da página usando JavaScript.

Imagine o DOM como uma árvore genealógica, onde o documento HTML é o pai e os elementos dentro dele são os filhos.

Esses elementos podem ser manipulados para alterar o conteúdo, estilo e comportamento da página

Acessando elementos

• Por ID: Podemos selecionar um elemento pelo seu atributo ID exclusivo usando document.getElementById().
• Por classe: Podemos selecionar elementos por suas classes usando document.getElementsByClassName().
• Por tag: Podemos selecionar elementos por suas tags usando document.getElementsByTagName().

Existem várias maneiras de selecionar elementos no DOM estas são apenas uma delas.

Modificando elementos

Após selecionar um elemento, podemos modificar seu conteúdo, estilo e outros atributos.

• Conteúdo: Podemos alterar o texto interno de um elemento usando a propriedade textContent ou innerHTML.
• Estilo: Podemos modificar o estilo de um elemento usando a propriedade style, que permite alterar atributos como cor, tamanho e posicionamento.
• Atributos: Podemos adicionar, remover ou modificar atributos de um elemento usando as propriedades getAttribute(), setAttribute() e removeAttribute().

<!-- HTML -->
<p id="meuParagrafo">Texto inicial</p>
<button onclick="alterarConteudo()">Alterar Texto</button>

<script>
function alterarConteudo() {
  // Alterar texto interno usando textContent
  const paragrafo = document.getElementById('meuParagrafo');
  paragrafo.textContent = 'Novo texto';

  // Modificar estilo usando style
  paragrafo.style.color = 'red';
  paragrafo.style.fontSize = '20px';
  paragrafo.style.fontWeight = 'bold';

  // Manipular atributos usando setAttribute() e removeAttribute()
  const botao = document.querySelector('button')
  botao.setAttribute('disabled', true);
  botao.removeAttribute('onclick');

}

</script>

Neste exemplo, temos um parágrafo com o id meuParagrafo que contém o texto Texto inicial. Também temos um botão que chama a função alterarConteudo() quando clicado.

A função alterarConteudo() é definida no JavaScript e é chamada quando o botão é clicado. Dentro dessa função, realizamos as seguintes ações:

1. Alterar o texto interno do parágrafo usando a propriedade textContent. O parágrafo é selecionado usando document.getElementById(‘meuParagrafo’) e, em seguida, atribuímos um novo valor ao textContent.
2. Modificar o estilo do parágrafo usando a propriedade style. Neste exemplo, alteramos a cor do texto para vermelho, o tamanho da fonte para 20 pixels e o peso da fonte para negrito.
3. Manipular atributos do botão usando as funções setAttribute() e removeAttribute(). Aqui, definimos o atributo disabled como true, desabilitando o botão, e removemos o atributo onclick, para que a função não seja mais chamada quando o botão for clicado.

Dessa forma, quando o botão é clicado, o texto do parágrafo é alterado, o estilo do parágrafo é modificado e os atributos do botão são manipulados conforme especificado na função alterarConteudo().

Manipulando eventos

Podemos usar a manipulação do DOM para adicionar eventos a elementos.

Exemplo:

// HTML:
<button id="meuBotao">Clique aqui!</button>

// JavaScript:
const botao = document.getElementById('meuBotao');
function minhaFuncao() {
  console.log('O botão foi clicado!');
  // Aqui você pode adicionar o código que deseja executar quando o botão for pressionado.

}

botao.addEventListener('click', minhaFuncao);

Neste exemplo, um botão é criado com o id meuBotao no HTML. Em seguida, no JavaScript, o botão é selecionado usando o document.getElementById() e armazenado na variável botao.

A função minhaFuncao() é definida e exibe uma mensagem no console quando o botão é clicado. Você pode adicionar o código que deseja executar dentro desta função.

Por fim, o método addEventListener() é usado para adicionar um evento de clique ao botão.

Ele recebe dois argumentos: o primeiro é o tipo de evento que queremos adicionar (neste caso, ‘click’) e o segundo é a função que será executada quando o evento ocorrer (no caso, minhaFuncao()).

Dessa forma, quando o usuário pressionar o botão, a função minhaFuncao() será chamada e a mensagem será exibida no console.

Desafio:

1. Crie um script JavaScript que cria um botão na página web.
2. Adicione um evento de click ao botão.
3. Quando o usuário clicar no botão, altere a cor do botão e exiba uma mensagem na tela.

Agora que você aprendeu a selecionar elementos por ID, classe e tag, vamos mergulhar mais fundo na manipulação do DOM e explorar como interagir com esses elementos de forma mais avançada.

As próximas aulas te guiarão por tópicos mais específicos, como seleção de elementos, modificação de conteúdo e estilos, e manipulação de eventos do usuário.