queryselectorallで取得したnodelistのlengthが0になってしまう

Question

前提・実現したいこと

queryselectorallで複数要素を取得し、「スクロールするたびに○○する」というプログラムを書きたいのですが、取得したnodelistが0になってしまいます。
調べてもわからなかった為質問させて頂きます。

該当のソースコード

<ul class="contents-item">
        <li class="targetElement">
          <img src="img/chihiro6.png" alt="温泉">
          <div class="redLine"></div>
          <div class="item-text">
            <h2>タイトル</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
          </div>
          <div class="btn"><a href="#">詳細はこちら</a></div>
        </li>

        <li class="targetElement">
          <img src="img/chihiro3.jpg" alt="食事">
          <div class="redLine"></div>
          <div class="item-text">
            <h2>タイトル</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
          </div>
          <div class="btn"><a href="#">詳細はこちら</a></div>
        </li>

const targetElement = document.querySelectorAll(".targetElement");

console.log(targetElement);

NodeList(0)
length: 0
__proto__: NodeListentries:
 ƒ entries()forEach: ƒ forEach()item: ƒ item()keys: ƒ keys()length: (...)values: ƒ values()constructor: ƒ NodeList()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.toStringTag): "NodeList"get length: ƒ length()__proto__: Object

Comments

[m.ts10806]

HTML半端ですが、それでは他者が再現できません。
あと、そのscriptはどこに書いているのでしょう。

Answer 1

</body>の前に実行するように持ってくるか
DOMContentLoadedのイベント内に入れるかでHTMLの読み込みが確実に完了している場所で実行するようにしてください。

これに限らず、取得したい対象の要素が読み込まれていないとJavaScriptから参照できないので今後も考慮した実装してください。特に動的に要素を作るときにハマります。