Dúvida sobre classList.add | JavaScript: programando na linguagem da web

José, boa noite!

O querySelector procura por todo o documento, você identifica a ele que apenas está procutando por uma classe usando o ponto. Se não utilizar o ponto ele vai procurar por todo o documento a palavra "exemplo".

O classList.add é diferente, nele você já está falando para o sistema que está inserindo uma classe, então ele muda diretamente a classe, sem a necessidade de digitar o ponto.

Aliás, se você digitar o ponto no classList ele irá inserir um ponto dentro do HTML na parte de class list, o que não irá dar erro, mas também não irá funcionar o comando.

Há um exemplo abaixo (Em qualquer momento que colocar o ponto na palavra "erro" ele para de funcionar) Abra o seu F12 do chrome e observe dentro de elements o problema ocorrendo. Espero ter ajudado!

HTML:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <link rel="stylesheet" type="text/css" href="index.css">

    </head>
    <body>

        <h1 class="exemplo">Teste </h1>

        <script src="javascript.js"></script>

    </body>
</html>

JS:

var exemplo = document.querySelector(".exemplo")
exemplo.classList.add("erro");

CSS

.exemplo{
  color: blue;
}

.erro{
  color: red;
}