Resumo da Aula 03-02,03 e 04 da etapa 05

Parents, Children e Siblings Quando precisamos obter a referência de vários elementos de uma pagina, nem sempre a melhor opção é sair selecionando um a um, o javascript nos proporciona uma opção em que podemos selecionar elementos com base em uma genealógica.

Conforme ilustração abaixo, vemos que a "DIV" é "Parent"(PAI) de "h1 e p1", consequentemente "h1 e p1" são "Children"(FILHOS) de "DIV" e portanto eles também são "Siblings"(irmãos). arvoreDOM

Podemos utilizar essa sequencia lógica para navegar e referenciar elementos mais livremente... HTML de Exemplo

<body>
  <h1>Parents, Children e Siblings Aula 03-02</h1>

  <article>
    <h2>Titulo do post</h2>
    <p>Lorem ipsum dolor sit amet consecteur adisciping</p>
    <p>Lorem ipsum dolor sit amet consecteur adisciping</p>
    <p>Lorem ipsum dolor sit amet consecteur adisciping</p>
    <div>Escrito por Roger Melo</div>
  </article>

<script src="./app2.js"></script>
</body>

Children Vamos selecionar todos os elementos filhos da tag "Article" e mostrar no console.

const article = document.querySelector("article");
console.log(article.children)   
//HTMLCollection(5) [h2, p, p, p, div]
//é devolvido uma HTMLCollection

Método Array.from() Como mostrado acima "article.children" devolve uma "HTMLCollection" que não pode ser utilizada em um "forEach()", felizmente podemos converter essa "HTMLCollection" em um "Array" utilizando o método "Array.from()"

OBSERVAÇÃO:O método Array.from() não sobrescreve os elementos utilizados por ele, sendo assim ele cria um novo array e o HTMLCollection gerado permanece intacto.

console.log(Array.from(article.children))   
//(5) [h2, p, p, p, div]

Aproveitando que agora podemos fazer um "forEach()" vamos adicionar a classe "article-element" em todos os elementos contidos dentro da TAG "article".

Array.from(article.children).forEach((element) => {
  element.classList.add("article-element");
});

Podemos observar a mudança abaixo: exemplo

Parent Com o Parent podemos obter o elemento pai do elemento referenciado, segue abaixo:

const title = document.querySelector("h2"); 
console.log(title.parentElement);   
//<article>...</article>

Também podemos escalar esse chamado para o elemento anterior ao elemento chamado.

console.log(title.parentElement.parentElement); 
//<body>...</body>

Siblings Já utilizando Siblings podemos acessar os elementos irmãos, utilizando next ou previous conforme abaixo:

const title = document.querySelector("h2"); 

//Próximo elemento irmão...
console.log(title.nextElementSibling);   
//<p class="article-element">Lorem ipsum dolor sit</p>

//Elemento irmão anterior...
console.log(title.previousElementSibling);   //null 
//h2 não tem irmão anterior, apenas o elemento pai "article"

Aula 03-03 - Eventos de clique

Na maioria das vezes as interações feitas em javascript partem do usuário, o código fica apenas esperando uma interação para responder... Uma das interações mais comum são os eventos de clique do mouse, abaixo faremos o passo a passo para capturar um clique de mouse e convertê-lo na ação esperada pelo usuário.

1º Passo: Fazer a query no DOM e obter a referência do elemento a ser modificado.

2º Passo: Adicionar um "eventListener"(escutador de evento) ao elemento que receberá o "clique".

3º Passo: Executar uma função de "callback"(chamado) que executará de fato as alterações.

HTML Exemplo

<body>
  <h1>Todos</h1>
    <ul>
    <li>Comprar Frango</li>
    <li>Ler Livro</li>
    <li>Tocar Violão</li>
    <li>Pagar as contas</li>
    </ul>
<button>Novo item</button>
</body>

Visualização exemplo

Obtendo a referência e testando o evento de click.

O que deve acontecer? Ao clicar no botão "novo item" deve aparecer no console a string "Clicou no botão"

//obtendo a referencia do botão
const botao = document.querySelector("button");

//adicionando eventListener 
botao.addEventListener("click");

//adicionando função de callback
botao.addEventListener("click", () => {
  console.log("Clicou no botão");
});

Saída exemplo

Obtendo a referência e testando eventos de click em uma lista.

O que deve acontecer? Ao clicar no botão "novo item" deve aparecer no console a string "Clicou na LI"

//obtendo a referencia das 'lis', 
//a resposta é um nodeList com todas as 'lis' do documento.
const lis = document.querySelectorAll("li");

//adicionando eventListener, como se trata de um nodeList 
//precisamos iterar cada elemento utilizando um forEach.
lis.forEach((li) => {
  li.addEventListener("click");

//adicionando função de callback
lis.forEach((li) => {
  li.addEventListener("click", () => {
    console.log("Clicou na li");
  });
});

Saída exemplo

Trabalhando com "event" e "target"...

EVENT No browser toda ação feita pode ser registrada em um objeto dentro da função de callback, nós podemos chamar esse objeto de "event", como nossa função registra o "click" do mouse, o "event" registra diversas informações e nos devolve parâmetros que podem ser utilizadas na função de "callback".

TARGET o "target" é uma dos parâmetros do "event" que podem ser utilizados, ele registra o local do click do mouse ou seja ela registra a referência do elemento em que o "event" ocorreu.

lis.forEach((li) => {
li.addEventListener("click", (event) => { 
//passando o event para registrar  as infos do click
const clickedElement = event.target;          
//registrando a referencia do elemento clicado

clickedElement.style.textDecoration = "line-through";    
//ao clicar, o texto será riscado
  });
});

Visualização exemplo Uma alternativa menos rebuscada

Também podemos passar diretamente o "li" que está sendo iterado pelo forEach, porém o "event.target" é o mais utilizado pois permite soluções mais avançadas.

Aula 03-04 - Criando e removendo elementos DOM

Temos os elementos:

    <li>Comprar Frango</li>
    <li>Ler Livros</li>
    <li>Tocar Violão</li>
    <li>Pagar as contas</li>

Removendo um elemento no DOM

//pegamos a referencia do elemento
const lis = document.querySelectorAll("li");

//utilizamos o método remove
lis.forEach((li) => {
  li.addEventListener("click", (event) => {
    const clickedElement = event.target;

    clickedElement.remove();
  });
});

Saída Agora toda vez que clicarmos em um dos elementos "li" na tela, ele é removido do DOM. exemplo

Adicionando um elemento no DOM Temos como exemplo: exemplo

Vamos fazer o botão "Novo item" funcionar.

1º Método - innerHTML Vamos fazer um novo item ser inserido na tela...

//pegamos a referencia do botão e da ul onde o conteúdo sera inserido.
const button = document.querySelector("button");
const ul = document.querySelector("ul");

//adicionamos um eventListener, um evento de "click" 
//e utilizamos innerHTML para mostrar na tela.
button.addEventListener("click", () => {
  ul.innerHTML += "<li>Novo item</li>"
});

Saída Ao clicar no botão um novo elemento será adicionado ao final da "ul" exemplo

2º Método - createElement("") Vamos criar um novo item com base na referencia do anterior para ser apresentado no console.

//pegamos a referencia do botão
const button = document.querySelector("button");

//adicionamos um eventListener e um evento de "click"
//porém desta vez iremos criar um novo elemento 
//utilizando o método createElement("")
button.addEventListener("click", () => {
  const li = document.createElement("li");
  console.log("Novo item");
});

Saída Toda vez que clicarmos no botão, um novo item aparecerá no console. exemplo

3º Método - append e prepend Vamos criar um novo item com base na referencia do anterior e inseri-lo na tela utilizando: append = o método append insere um elemento recebido por argumento como último item do elemento em que foi encadeado. prepend = o método prepend insere um elemento recebido por argumento como primeiro item do elemento em que foi encadeado.

//pegamos a referencia do botão
const button = document.querySelector("button");

//adicionamos um eventListener e um evento de "click"
//iremos criar um novo elemento utilizando o método createElement("")

button.addEventListener("click", () => {
  const li = document.createElement("li");

//apontamos com o textContent o conteúdo que aparecerá na tela.
  li.textContent = "Novo item";
//e posicionamos ele como primeiro item da ul com o prepend
  ul.prepend(li);
});

//para adicionar o item no final da ul é só utilizar o append... 
//ex: ul.append(li)

Saída exemplo

@Roger-Melo

roger-melo-treinamentos / curso-de-js-roger-melo

Resumo da Aula 03-02,03 e 04 da etapa 05 #1417

Aula 03-03 - Eventos de clique

Aula 03-04 - Criando e removendo elementos DOM