Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

.parentElement do DOM

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript, no capítulo Concluir tarefa e atividade Selecionando elemento pai

por MATHEUS JOSE DANTAS CORREIA
| 70.2k xp | 15 posts

Não entendi ao certo como o método 

.parentElement

sobe na árvore do DOM até encontrar o elemento criado.

Pelo exemplo da aula foi criado um elemento chamado 'li' bem no início do nosso arquivo JS e, logo depois, no final do arquivo JS, cria-se uma arrow function de nome concluirTarefa( )

const concluirTarefa = (evento) => {
    const botaoConclui = evento.target
    const tarefaCompleta = botaoConclui.parentElement

    tarefaCompleta.classList.toggle('done')
}

que recebe um evento. Dentro dessa função não tem nenhum nome de variável igual à variável inicial onde é criada, 

const tarefa = document.createElement('li')

como podemos ver pelo trecho em que o professor explica que o .parentElement está buscando o elemento pai. Posso estar deixando passar alguma informação extra desse código de exemplo, mas quem puder me ajudar a entender o funcionamento que o método .parentElement faz, eu agradeço!

2 respostas
solução!
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala ai Matheus, tudo bem? A função parentElement vai realizar a navegação via DOM, ou seja, imagine o seguinte trecho HTML:

<header>
    <nav>
        <ul>
            <li><a>Link</a></li>
        <ul>
    </nav>
</header>

Agora, vamos supor que precisamos pegar o a e navegador até seu header, podemos fazer algo assim:

const a = document.querySelector(a)
const li = a.parentElement
const ul = li.parentElement
const nav = ul.parentElement
const header = nav.parentElement

Repare que cada vez que chamamos o parentElement ele devolveu uma referência do seu pai direto.

No caso o pai do a seria o li, o pai do li seria o ul, o pai do ul seria o nav e o pai do nav seria o header.

Espero ter ajudado.

por Karina Silva dos Santos Cruz
| 80.5k xp | 4 posts

Olá Matheus, tudo bem?

Só respondendo a questão levantada:

Dentro dessa função não tem nenhum nome de variável igual à variável inicial onde é criada

Vamos observar o método criarTarefa: 

const criarTarefa = (evento) => {
    evento.preventDefault();

    const lista = document.querySelector('[data-list]');

    const input = document.querySelector('[data-form-input]'); 
    const valor = input.value; 

    const tarefa = document.createElement('li');
    tarefa.classList.add('task'); 
    const conteudo = `<p class = "content">${valor}<\p>` 

    tarefa.innerHTML = conteudo;
    tarefa.appendChild(BotaoConclui()); 
    lista.appendChild(tarefa);

    input.value = " ";
}

Dentro do método criarTarefa a nossa constante

const tarefa = document.createElement('li')

recebe um appendChild onde é declarado que botãoConclui() é filho de tarefa: 

tarefa.appendChild(BotaoConclui());

Então a partir desse momento, o JS compreende que o novo elemento criado dentro do método BotaoConclui é filho de tarefa.