Fala ai Renato, tudo bem? Vamos lá:
Porem me estranha o console.log(titulo) imprimir no console a query alterada quando a atribuição é feita depois do comando de log. Qual seria a explicação para que console.log(titulo) imprima o conteúdo alterado e console.log(titulo.textContent) imprima o conteúdo original?
No caso, os códigos JavaScript são executados linha por linha, nesse caso, ele vai fazer algo assim:
- Cria uma variável chamada
titulo - Execute a função
querySelector - Referencia o resultado da função
querySelector para a variavel titulo - Chame a função
log da variável titulo - Chame a função
log da propriedade textContent - Altere a propriedade
textContent para Banana
Porém, a variável titulo é apenas uma referência para o objeto DOM do h1, por ser uma referência e a mudança ter sido tão rápida, ele primeira atualiza o DOM e depois loga a referência para o DOM.
Se por um acaso você agendar a atualização do DOM para poucos milisegundos:
setTimeout(() => {
titulo.textContent = "Banana";
}, 100)
Vai ver que o log é feito primeiro que a atualização da página.
Por debaixo dos panos aconteceu muita coisa e é bem mais complexo do que isso, estou apenas tentando simplificar.
Espero ter ajudado.
