Arquivo .principal.js X index.html

Olá, Verifiquei que no inicio do projeto somos orientados a criar um arquivo para HTML, CSS e Javascript (que é o correto). Porém quando coloco os comandos do projeto no arquivo separado do Javascript o mesmo não funciona. Acredito que é por causa do ".document"

Ex: Tenho meu arquivo index.html

<tr class="paciente" id="primeiro-paciente">
    <td class="info-nome">Paulo</td>
    <td class="info-peso">100</td>
    <td class="info-altura">2.00</td>
    <td class="info-gordura">10</td>
    <td class="info-imc">0</td>
</tr>

-Meu arquivo JS:

var paciente = document.querySelector("#primeiro-paciente");
var tdPeso = paciente.querySelector(".info-peso");
console.log(tdPeso);

Não funciona quando está em arquivos externos. Porém executando na console ou colocando as tags <script><\script> dentro do <body></body> funciona.

Mergulhe em programação