解決したいこと

Thymeleafを使用したHTMLファイル内のid属性をつけた要素の値を取得ができません。
以下詳細のように、idを取得しようとしてもnullが返ってきてします。

環境

Spring Boot 2.6.7
Java11
Thymeleaf

ディレクトリ構成

ProjectRoot
┗src
  ┗main
    ┣java
    ┗resources
      ┣static
      ┃ ┗js
      ┃   ┗example.js
      ┗templates
        ┗demo
          ┗example.html

値を取得できないコード

以下のコードで値の取得を試みたのですが、nullが返ってきてしまいます。
【src/resources/templates/example/example.html】

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4  <meta charset="UTF-8">
5  <script th:src="@{/js/example.js}"></script>
6  <title>idを取得できない。</title>
7</head>
8<body>
9  <div id="target">取得したい要素</div>
10</body>
11</html>

【src/resources/static/js/example.js】

javascript
1'use strict'
2{
3  const target = document.getElementById('target');
4  console.log(target); // 出力結果　-> null
5}

確認したこと①

console.logで単純に文字列を取得することはできました。
JavaScriptは正常に読み込めているようです。

【src/resources/static/js/example.js】

javascript
1'use strict'
2{
3  console.log('Hello'); // 出力結果 -> Hello
4
5  const target = document.getElementById('target');
6  console.log(target); // 出力結果　-> null
7}

確認したこと②

HTMLファイルに直接JavaScriptを挿入した場合、正常に出力されました。

src/resources/templates/example/example.html】

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4  <meta charset="UTF-8">
5  <!-- <script th:src="@{/js/example.js}"></script> -->
6  <title>idを取得できない。</title>
7</head>
8<body>
9  <div id="target">取得したい要素</div>
10  <script>
11    'use strict'
12    {
13      const target = document.getElementById('target');
14      console.log(target); // 出力結果　-> <div id="target">取得したい要素</div>
15    }
16  </script>
17</body>
18</html>

確認したこと③

idではなく、th:idと書き換えを試してみたのですが、症状が改善されませんでした。

【src/resources/templates/example/example.html】

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4  <meta charset="UTF-8">
5  <script th:src="@{/js/example.js}"></script>
6  <title>idを取得できない。</title>
7</head>
8<body>
9  <div th:id="target">取得したい要素</div>　<!--出力結果：null-->
10</body>
11</html>