Solucionado
Porque ao inserir o script 1 no inicio da pagina é carregado o DOM completamente inclusive com todas as tags e quando insiro o script 2 dá erro por não carregar? Se é carregado de cima pra baixo, o retorno do script1 não deveria retornar só o html até a tag scritp? script1:
console.log(document);script2:
console.log(document.querySelector(h1));
Oi Luciano!
O document realmente representa o documento inteiro, incluindo toda sua estrutura e possiveis funcoes.
O document.querySelector é uma funcao que te permite navegar nessa estrutura gigante. Ela recebe um seletor CSS como argumento e te devolve o primeiro elemento que bater com esse CSS.
No seu caso nao funcionou porque o h1, o seletor, precisa estar entre aspas:
console.log(document.querySelector("h1"));Ah sim... mas nem é essa a questão principal. A dúvida é: porque se colocar no inicio da pagina esse trecho de código, o primeiro mostra o DOM inteiro e o outro dá erro?
console.log(document);
console.log(document.querySelector(h1));
É justamente por que a sintaxe correta é: document.querySelector('<aqui o seletor que deseja>');
O seletor tem que estar entre aspas.
Cole isso no console do seu navegador:
document.querySelector("h1");
Lembrando que, por já estar no console do navegador, não precisa do console.log.
Entendi agora sua pergunta.
Quando vc faz imprime o document na verdade vc ta imprimindo a referencia ao objeto document. No Chrome por exemplo ele mostra só #document e uma setinha pra vc expandir e ver o resto.
Conforme vc vai abrindo as setinhas, ele vai puxando os valores live do documento. Isso quer dizer que ele nao ta mostrando o que tinha la dentro quando a referencia do document foi impressa; ele ta mostrando o que tem la dentro quando a setinha foi clicada.
E vc tem razao, se vc imprime o document no inicio da pagina, ela ainda nao gerou o HTML todo e estaria vazio. Mas como a pg carrega mto rapido, vc nao consegue ver isso, pq quanco clica na setinha o HTML ja carregou.
Da pra enxergar isso forcando um script que trave a renderizacao da pagina e ai vc consegue clicar na setinha antes e ver que ele ta vazio. So usar um alert:
console.log(document);
alert();Executa isso, nao clica no alert e olha o #document no Console pra ver que ele ta vazio.
E ai, quando vc chama o querySelector ele busca no HTML que esta disponivel no momento. E como vc colocou no topo, antes da declaracao do <h1>, ele nao acha e dá erro.