ThymeleafでのJavaScriptはjQueryの関数じゃないと動かない？

こんにちは。
SpringBootについて初学者なので拙いところもあると思いますが、よろしくお願いします。

質問

表題の通りなのですが、先ほどThymeleaf上で<script type="text/javascript">タグの中にJavaScriptをべた書きしていました。
しかしgetElementByIdなどでの要素の取得が出来ませんした。
alertは動いたので結果を見てもnullが返ってくるだけで、JavaScript自体は動いてるのになぜか要素の取得が出来ていないという状況でした。

他のJavaScriptが動いているページとの違いは$(function () {}で関数化してるかどうかでした。
よってその部分をまるごと関数化したら動くようになりました。

これはThymeleafの仕様ですか？
それとも何か他に原因があると考えられますか？

調べても似たような現象が出てこなかったので質問させていただきました。
回答よろしくお願いします。

補足情報

Eclipse 2020 Java FullEdition
AmazonCorretto jdk15.0.2_7
SpringBoot 2.4.3
MySQL 8.0.23
Windows10 Pro 1909

行動規範の内容に同意します

回答1件

ベストアンサー

$はテンプレートエンジンとして特別な意味を持つのでth:inlineをscriptタグに指定しなければjQueryこそ動かないのでは。
どのようにコード書いてるか次第ですが、エスパー回答するとgetElementByIdを書いてたときは、要素が読み込まれる前にその処理通ってたのでは。
jQueryも結局はJavaScriptなので「jQueryの書き方でないと動かない」ということはあり得ません。
getElementByIdの結果がnullかどうかを確認してみて、nullであれば存在しない要素か、処理時に読み込まれてないかのどちらかです。

調べると分かりますが、$(function () {}はdocumet.ready　つまり、htmlの読み込みを待機したうえで動作するのでonloadとほぼ同義です。

投稿2021/04/16 08:21