Oii Keitiane, como você está?

As tags são elementos de marcação do mundo HTML. Isso quer dizer que tudo que colocamos nesse mundo é o que estará aparecendo na tela para o usuário quando carregarmos nossa página. Para lidar com esses elementos dentro do mundo JavaScript, utilizamos o document e variáveis para buscar as informações, e então podemos deixar o programa mais interativo a partir da linguagem de programação.

Vamos analisar mais de perto esse trecho de código:

<meta charset="UTF-8">

<input/>
<button>Compare com o meu segredo</button>

<script>

    var input = document.querySelector("input");
    input.value

</script>

Aqui, o input.value está no mundo JS. value é um comando específico do JavaScript que retorna o valor que está dentro de uma variável, e ele não interage diretamente com tags, que são do mundo HTML. Por esse motivo a tag foi atribuída à uma variável por meio do comando document.querySelector antes de qualquer outra coisa ser feita dentro do mundo JS: agora, sempre que quisermos fazer alguma coisa que tenha relação com o que o usuário digitou dentro do campo que está na tela, utilizaremos a variável input que está armazenando essa informação.

O caso de button.onclick é bastante parecido:

var button = document.querySelector("button");

button.onclick = verifica;

Perceba que a atribuição da variável vem antes do comando onclick. Isso quer dizer que sempre que a palavra button aparecer dentro do nosso código ela significará o resultado da button, mas isso só pode acontecer através do comando document.querySelector que é quem pode interagir diretamente com o mundo HTML. Com a variável, essa informação já fica guardada e pode se repetir sem a necessidade de digitarmos todo esse comando a cada vez que for necessário lidar com alguma tag.

Para que os nomes não se confundam, você pode até escolher chamar as variáveis com outro nome, em português por exemplo:

<meta charset="UTF-8">

<input/>
<button>Compare com o meu segredo</button>

<script>
    var segredo = 5;

    var entrada = document.querySelector("input");

    function verifica() {

        if(entrada.value == segredo) {

        alert("Você ACERTOU!");
        } else {

        alert("Você ERROU!!!!!!!!");
        }

    }

    var botao = document.querySelector("button");

    botao.onclick = verifica;

</script>

Assim é possível ver de forma mais clara quando estamos digitando o nome da tag ou da variável.

Espero ter esclarecido sua dúvida, Keitiane. Estou à disposição!

Um forte abraço.