Rodrigo Brito

Selecionando um elemento a partir de outro elemento

Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

Inicialmente, conheceremos três propriedades que iremos utilizar para a abordagem do transversing e manipulação: outerHTML, innerHTML e innerText.

Estas propriedades retornam uma string contendo o html ou texto e permitem a atribuição de valores aos elementos selecionados.

• outerHTML: retorna todo o html do elemento;
• innerHTML:retorna o html interno; e
• innerText:retorna o texto do elemento sem as tags.

Ex:

Para atribuição, o único detalhe é que no innerText, caso seja atribuida uma tag, ela é inserida como texto. Ex:

Agora abordaremos o Trasversing. Através deste é possível realizar uma navegação pelo DOM, através dos elementos, e através de suas propriedades e métodos selecionar outros elementos a partir de um, permitindo a obtenção de valores e manipulação. Eis algumas propriedades:

• parentElement: retorna o pai do elemento;
• previousElementSibling:retorna o elemento acima;
• nextElementSibling: retorna o elemento abaixo;
• children:retorna o HTMLCollection com os filhos; e
• children[0]: retorna o filho no índice 0. dentro dos colchetes podem ser inseridas pseudo-classes, tais como "--lista.children.length" e "last-child".

Ex:

Os elementos que são objetos herdeiros da classe Element representam um elemento html, ou seja, uma tag. Os objetos da interface Node representam nós, e podem ser elementos de ELement, textos, comentários do código, quebra de linha etc.

Podem ser obtidos diferentes elementos de retorno a partir das seguintes propriedades de Node:

• previousElementSibling: retorna o elemento acima;
• previousSibling:retorna o node acima;
• firstChild: retorna o primeiro node child; e
• childNodes:retorna todos os node child.

Ex:

Como poderemos manipular elementos, incluindo mover estes no DOM? Através de métodos de Node. Ose seguintes métodos podem ser utilizados para a movimentação de elementos:

• appendChild(element):move o elemento passado como parâmetro para o elemento selecionado;
  
• insertBefore(element):insere o elemento passado como parâmetro antes do elemento selecionado;
• removeChild(element): remove o elemento passado como parâmetro do elemento selecionado; e
• replaceChild(element): substitui o elemento passado como parâmetro pelo elemento selecionado.

Para não ficar excessiva a quantidade de imagens, será exemplificado apenas de forma textual as movimentações de conteúdo possíveis de realizar no projeto, contudo, teste em seu ambiente e veja como os conteúdos do DOM realmente ficam após a execução de pequenos comandos. Ex:

const list = document.querySelector('.skills-list');
const contact = document.querySelector('.contact');
const title = document.querySelector('.title');

contact.appendChild(list); // move a lista de skills para o final de contato
contact.insertBefore(list, title); // insere a lista de skills antes de título
contact.removeChild(title); // remove o título do contato
contact.replaceChild(list, title); // substitui o título pela lista de skills

Além de movimentar, podemos criar novos elementos em documentcom o métodocreateElement()e os inserir em um elemento alvo. Ex:

Todo elemento que é selecionado é único, mas podemos criar um novo elemento baseado em um selecionado utilizando o método cloneNode(). O parâmetro truequando passado sinaliza a inclusão dos filhos do elemento. Ex:

Neste caso, o título no topo da página continua existindo como um elemento específico e o novo título se torna um outro elemento único, sendo uma cópia em suas propriedades e atributos, não tendo a mesma referência em memória.