WDD 131: Fundamentos da Web Dinâmica

S02 – Atividade de Aprendizagem: Modelo de Objeto de Documento

Visão Geral

Uma habilidade essencial para qualquer desenvolvedor web front-end é a capacidade de usar DOM (DOM), um objeto JavaScript que é criado depois que o navegador renderiza o documento a primeira vez. Usar o DOM significa ler, editar, atualizar ou excluir o documento, incluindo propriedades CSS, de forma dinâmica. Essencialmente, o DOM é o esboço dos nós HTML e do conteúdo.

Esta atividade tem como objetivo apresentar o DOM HTML e ensinar a utilizar o documento com JavaScript.

Preparação

• Referência: Manipulando documentos – MDN.

  O ☼ CodePen Exemplo de Lista de Compras Usando JS é um bom exemplo de manipulação de DOM usando JavaScript, e vai te ajudar a completar as atividades dessa semana.

• Prática: Alguns conceitos/casos de uso comuns de manipulação de DOM.
  • Para selecionar um elemento HTML do documento usando o método querySelector.
    Esta linha de código seleciona a primeira instância de um elemento article do documento e atribui o elemento como uma referência à variável chamada article.

    const article = document.querySelector('article');

  • Para alterar a propriedade innerHTML de um elemento existente.
    Esta linha de código usa uma variável existente que já selecionou um elemento e altera seu valor de propriedade innerHTML.

    article.innerHTML = 'innerHTML é compatível com as tags <strong>HTML</strong>. Contudo, a propriedade textContent não.';

  • Para alterar o estilo CSS inline de um elemento.
    Esta linha de código altera a propriedade CSS text-align do elemento selecionado.

    article.style.textAlign = 'right';

  • Para alterar um atributo de um elemento.
    Esta linha de código adiciona uma classe de atributo ao elemento e atribui um valor a ele.

    article.setAttribute('class', 'active');

    Outro modo de alterar um atributo de um elemento, especificamente o atributo class, é manipular diretamente a classList do elemento.

    articleElement.classList.add('active');

    Esse método geralmente é preferido ao trabalhar com manipulação de classes porque classList tem métodos adicionais, como add, remove, toggle e contains, tornando-o mais conveniente e expressivo para gerenciar classes em um elemento.
  • Para criar um elemento.
    Esta linha de código cria um novo elemento <p> e o armazena na variável chamada parágrafo.

    const paragrafo = document.createElement('p');

  • Para anexar um elemento com conteúdo ou elementos adicionais.
    Essas linhas de código adicionam conteúdo ao final do elemento article.

    article.appendChild(paragrafo);
    article.append(paragrafo, 'Adição Olá Mundo!');

    O método append() permite que você inclua vários argumentos para anexar ao elemento na ordem especificada.

  • Para remover um elemento do documento.
    Essas linhas de código removem o parágrafo de article e, então, o próprio article.

    article.removeChild(paragrafo);
    article.remove();

Instruções da Atividade

Esta aplicação permite que os usuários insiram seus capítulos favoritos do Livro de Mórmon e os exibam em uma lista que é atualizada automaticamente na tela. As entradas podem então ser excluídas da lista exibida.

1. Crie um arquivo HTML chamado "bom.html" na pasta semana02.
2. Seu documento HTML bom.html deve incluir as meta tags básicas e um título apropriado.
3. Crie um arquivo CSS externo e um arquivo JS e coloque-os em subpastas apropriadas dentro da pasta semana02.
   Avalie Seu Conhecimento

   Na pasta semana02, crie duas pastas chamadas estilos e scripts. Seu arquivo CSS irá para a pasta estilos e seu arquivo JavaScript irá para a pasta scripts. Você já tem pastas na raiz wdd131 chamadas estilos e scripts, mas isso não tem problema. Trataremos esta pasta semana02 de forma independente da pasta raiz externa wdd131.

4. Copie e cole a interface básica (HTML e CSS) do seguinte CodePen ☼ O Livro de Mórmon - 10 principais.
5. No seu arquivo js em branco, declare 3 (três) variáveis que contenham referências aos elementos input, button (botão) e list (lista).
   Avalie Seu Conhecimento

           const input = document.querySelector('#capfav');
   const botao = document.querySelector('button');
   const lista = document.querySelector('______'); // você precisa preencher o espaço em branco para referenciar o elemento HTML que é um elemento de lista não ordenada.

6. Crie um elemento li que conterá o título do capítulo de cada entrada e um botão de exclusão associado.
   Avalie Seu Conhecimento

   const li = document.createElement('li');

   Identificamos essa variável como li, mas isso foi apenas para simplificar.
   O identificador/nome da variável não precisava ter o mesmo nome do elemento que estava sendo criado.

7. Crie um botão de exclusão.
   Avalie Seu Conhecimento

   const botaoExcluir = document.createElement('button');

8. Preencha o textContent ou innerHTML da variável do elemento li com o valor de entrada.
   Avalie Seu Conhecimento

   li.textContent = input.value;

   textContent é preferível a innerHTML, pois é mais seguro.
   Contudo, se você precisar incluir tags HTML, use innerHTML.
   textContent não renderizará tags HTML. Ele exibirá as tags como texto.

   Por que a propriedade value é usada?
   Porque a variável input faz referência a um campo de texto de entrada HTML e é isso que se deseja, ou seja, a entrada do usuário. Aqui está o HTML que foi fornecido: <input type="text" id="capfav" placeholder="Alma 5">

9. Preencha o texto do botão TextContent com ❌.
   Avalie Seu Conhecimento

   botaoExcluir.textContent = '❌';

10. Anexe a variável do elemento li com o botão de exclusão.
    Avalie Seu Conhecimento

    li.append(botaoExcluir);

11. Anexe a variável do elemento li à lista não ordenada no seu HTML.
    Avalie Seu Conhecimento

    lista.append(li);

<button aria-label="Close" id="close-button">❌</button>

Envio

• Sempre salve seu trabalho. Adicionaremos mais funcionalidades na próxima atividade.