Solucionado
Foi ensinado que o querySelector busca um seletor dentro do HTML através da palavra reservada para definir isso que é document. Até aqui ok entendi que document indica que o seletor será buscado dentro do documento HTML mas... ese tivermos mais de um arquivo HTML no projeto? Como especificar qual arquivo queremos buscar o seletor? Existe uma maneira ou eu precisaria criar um arquivo .js para cada HTML que tenho?
Olá Victor, tudo bem?
A sua pergunta é muito interessante e pode ajudar outras pessoas que também têm essa dúvida. Quando usamos o document.querySelector, estamos buscando um elemento dentro do documento HTML atual em que o script está sendo executado. Isso significa que se você tiver vários arquivos HTML em seu projeto, cada um deles terá seu próprio documento e, portanto, seu próprio contexto para a busca de elementos.
Se você precisar buscar um elemento em um arquivo HTML diferente, você pode usar o método window.open() para abrir o arquivo em uma nova janela e, em seguida, usar o document.querySelector na nova janela aberta. No entanto, essa não é uma solução muito prática.
Uma solução melhor seria criar um arquivo JavaScript separado para cada arquivo HTML e, em seguida, incluir o arquivo JavaScript correspondente no arquivo HTML usando a tag <script>. Dessa forma, você pode usar o document.querySelector no arquivo JavaScript correspondente e ele buscará elementos dentro do documento HTML em que o script está sendo executado.
Espero ter ajudado e bons estudos!
Me ajudou sim! Muito obrigado!
Valeu o retorno Victor. Fico feliz em ajudar :)