Manipulação do DOM com JavaScript

Introdução

Bem-vindo ao laboratório de Manipulação do DOM com JavaScript. O Document Object Model (DOM) é uma interface de programação para documentos web. Ele representa a página de forma que os programas possam alterar a estrutura, o estilo e o conteúdo do documento. Quando uma página web é carregada, o navegador cria um DOM da página, que é uma estrutura de objetos semelhante a uma árvore.

Neste laboratório, você aprenderá a usar JavaScript para interagir com o DOM. Você praticará a seleção de elementos, a alteração de seu conteúdo, a modificação de seus atributos e a criação e adição dinâmica de novos elementos à página. Estas são habilidades fundamentais para a criação de aplicações web interativas e dinâmicas.

Ao concluir este laboratório, você será capaz de:

• Selecionar um elemento do DOM usando seu ID.
• Alterar o conteúdo de um elemento.
• Definir atributos de um elemento.
• Criar um novo elemento.
• Anexar um novo elemento ao documento.

Vamos começar!

Selecionar elemento por ID com getElementById

Nesta etapa, você aprenderá a selecionar um elemento HTML usando seu ID exclusivo. O método document.getElementById() é uma das maneiras mais comuns de acessar um elemento específico no DOM.

Primeiro, localize o arquivo script.js no explorador de arquivos no lado esquerdo do WebIDE. Clique nele para abri-lo no editor. O script de configuração já criou este arquivo para você.

Agora, adicione o seguinte código ao script.js. Este código selecionará o elemento div com o ID main-content e o armazenará em uma variável chamada contentDiv. Em seguida, faremos o log deste elemento no console para verificar se o selecionamos corretamente.

const contentDiv = document.getElementById("main-content");

console.log(contentDiv);

Após adicionar o código, salve o arquivo script.js. Para ver o resultado, clique na aba "Web 8080" na parte superior da interface. Você não verá nenhuma mudança visual na página em si, mas poderá ver a saída do console.log. Para fazer isso, abra as ferramentas de desenvolvedor do navegador (geralmente você pode fazer isso clicando com o botão direito na página e selecionando "Inspecionar", em seguida, navegando para a aba "Console"). Você deverá ver o elemento div HTML registrado no console.

Alterar conteúdo de texto com innerHTML

Nesta etapa, você modificará o conteúdo do elemento que selecionou. A propriedade innerHTML permite obter ou definir o conteúdo HTML dentro de um elemento. É uma maneira poderosa de alterar dinamicamente o que é exibido em sua página web.

Continue editando o arquivo script.js. Abaixo do código que você escreveu na etapa anterior, adicione a seguinte linha. Isso mudará o texto dentro do div que selecionamos.

const contentDiv = document.getElementById("main-content");

// Esta linha é nova
contentDiv.innerHTML = "O conteúdo foi alterado por JavaScript!";

console.log(contentDiv);

Certifique-se de salvar o arquivo script.js. Agora, volte para a aba "Web 8080" e atualize a página. Você deverá ver que o texto dentro da caixa mudou de "Este é o conteúdo original." para "O conteúdo foi alterado por JavaScript!".

Definir atributo com o método setAttribute

Nesta etapa, você aprenderá a alterar os atributos de um elemento, como o href de um link ou o src de uma imagem. O método setAttribute() é usado para esse fim. Ele recebe dois argumentos: o nome do atributo a ser definido e o valor a ser definido para esse atributo.

Nosso arquivo index.html contém um link (<a> tag) com o ID labex-link. Vamos alterar seu atributo href para apontar para o site da LabEx.

Adicione o seguinte código ao seu arquivo script.js.

// Seleciona o elemento de link
const link = document.getElementById("labex-link");

// Define seu atributo href
link.setAttribute("href", "https://labex.io");

Seu arquivo script.js completo agora deve se parecer com isto:

const contentDiv = document.getElementById("main-content");
contentDiv.innerHTML = "O conteúdo foi alterado por JavaScript!";
console.log(contentDiv);

// Seleciona o elemento de link
const link = document.getElementById("labex-link");

// Define seu atributo href
link.setAttribute("href", "https://labex.io");

Salve o arquivo, mude para a aba "Web 8080" e atualize. Agora, se você passar o mouse sobre o link "LabEx", deverá ver na barra de status do seu navegador que ele aponta para https://labex.io. Clicar nele tentará navegar para essa página.

Criar novo elemento com createElement

Nesta etapa, você criará um novo elemento HTML do zero usando JavaScript. Esta é uma parte fundamental da construção de interfaces dinâmicas, onde você pode precisar adicionar novos itens a uma lista, exibir novas mensagens, etc. O método document.createElement() é usado para criar um elemento especificado por um nome de tag.

Vamos criar um novo elemento de parágrafo (<p>). Adicione o seguinte código ao final do seu arquivo script.js.

// Cria um novo elemento de parágrafo
const newParagraph = document.createElement("p");

// Define seu conteúdo
newParagraph.innerHTML = "Este é um novo parágrafo criado com JavaScript.";

// Adiciona uma classe para estilização
newParagraph.className = "new-element";

Neste ponto, o elemento foi criado na memória do navegador, mas ainda não está visível na página. Criamos o elemento, definimos seu conteúdo usando innerHTML e atribuímos a ele uma classe CSS para que seja estilizado de acordo com nosso arquivo style.css. Na próxima etapa, você aprenderá como adicionar este novo elemento ao documento.

Anexar elemento filho com appendChild

Nesta etapa final, você adicionará o elemento que criou na etapa anterior à página web. O método appendChild() adiciona um nó (um elemento) como o último filho de um elemento pai.

Primeiro, precisamos selecionar o elemento pai onde queremos colocar nosso novo parágrafo. Nosso index.html tem uma div com o ID container para este propósito. Em seguida, usaremos appendChild() para adicionar nosso newParagraph a ele.

Adicione o seguinte código ao final de script.js.

// Obtém o elemento container
const container = document.getElementById("container");

// Anexa o novo parágrafo ao container
container.appendChild(newParagraph);

Seu arquivo script.js completo agora deve conter todo o código das etapas anteriores. Salve o arquivo e atualize a aba "Web 8080". Você deverá agora ver o novo parágrafo estilizado aparecer abaixo do link em sua página.

Parabéns! Você manipulou com sucesso o DOM para alterar conteúdo, definir um atributo e criar e exibir dinamicamente um novo elemento.

Resumo

Neste laboratório, você aprendeu as técnicas fundamentais para manipular o Document Object Model (DOM) com JavaScript. Essas habilidades são essenciais para criar páginas web dinâmicas e interativas.

Você praticou com sucesso:

• Selecionar elementos do DOM usando document.getElementById().
• Alterar o conteúdo de um elemento usando a propriedade innerHTML.
• Modificar os atributos de um elemento com o método setAttribute().
• Criar novos elementos HTML na memória com document.createElement().
• Adicionar elementos recém-criados à página web usando appendChild().

Ao combinar esses métodos, você pode construir interfaces de usuário complexas que respondem às ações do usuário e exibem dados dinamicamente. Bom trabalho em completar este laboratório!