Pessoal, durante a aula ficou claro o porque não funcionou o exemplo do query selector no head, afinal no foi tinha sido carregado ainda o h1, mas fiquei com uma dúvida: Se esse query selector não funcionou, porque o console.log(document); funcinou? afinal ele também estava no head, logo não tinha sido carregado ainda o html todo
Oi João, tudo certo?
Muito interessante a sua dúvida! Quando colocamos console.log(document), ele nos retorna dessa maneira:
Veja que ele nos retorna um #document. Porém, não conseguimos acessar nada dentro dele (se tentarmos acessar o querySelector irá retornar null, como você pontuou). Esse #document é um elemento virtual, significa que ele não faz parte da DOM real. Por conta disso, os métodos do objeto global (como o querySelector) não estão acessando o erro, e sim a DOM que não foi carregada e renderizada ainda, causando o erro.
Você pode ler mais sobre esse assunto nesse tópico.
Espero ter ajudado, bons estudos =)