同一选择器为什么先失败后成功？

<script>
  console.log('之前：', document.querySelector('#hello'));
</script>
<button id="hello" type="button">问好</button>
<script>
  const hello = document.querySelector('#hello');
  console.log('之后：', hello.tagName);
</script>

提问：预测两次输出。为什么不能仅凭第一次查询失败就认定选择器写错？给一个不修改 id 的修复思路。