Dúvida sobre console.log() | JavaScript: programando na linguagem da web

2
respostas

por Jonas Candido do Carmo

| 307.3k xp | 10 posts

Olá,

Eu fiz o exercício e escrevi mais algumas linhas de código no principal.js pra fazer alguns testes.

HTML:

<body>

        <header>
            <div class="container">
                <h1 class="titulo">Aparecida Nutrição</h1>
            </div>
        </header>
        <main>

JavaScript:

1 var titulo = document.querySelector(".titulo");
2 console.log(titulo);
3 titulo.textContent = "Aparecida Nutricionista";
4 console.log(document.querySelector(".titulo"));
5 console.log(titulo.textContent);
6 titulo = titulo.textContent;
7 console.log(titulo);

No console eu recebi a resposta:

principal.js:2 <h1 class="titulo">Aparecida Nutricionista</h1>
principal.js:4 <h1 class="titulo">Aparecida Nutricionista</h1>
principal.js:5 Aparecida Nutricionista 
principal.js:7 Aparecida Nutricionista

Minha dúvida é: Na primeira linha do console não deveria ser "Aparecida Nutrição" em vez de "Aparecida Nutricionista", já q a alteração por titulo.textContent = "Aparecida Nutricionista" só foi feita depois?

Obrigado.

2 respostas

por João Inácio Neto

| 27.7k xp | 5 posts

Front-end Developer | Developer Instructor

29/08/2018

Está correto, pois você está referenciando a variável "titulo"

var titulo = document.querySelector(".titulo");
console.log(titulo);
titulo.textContent = "Aparecida Nutricionista";

por André Machado

| 91.9k xp | 16 posts

Estagiário Programador Mobile

30/08/2018

Opa Jonas O que acontece é que quando o navegador pega o local da variável ela possui um valor. No momento de imprimir, a variável já está trocada. Isso acontece porque você imprime na verdade uma variável do DOM (Document Object Model).

Se você fizer algo do tipo:

var titulo = document.querySelector(".titulo");
console.log(titulo);
setInterval(() => {
    titulo.textContent = "Aparecida Nutricionista";
    console.log(titulo);
}, 10);

console.log(document.querySelector(".titulo"));
console.log(titulo.textContent);
titulo = titulo.textContent;
console.log(titulo);

Todas as suas saídas serão aparecida nutrição. Porque você altera o DOM. Javascript é manipulação de DOM.

No seu caso, a atribuição é mais rápida que a impressão e tudo acaba sendo aparecida nutricionista.