DOM

【JavaScript】DOM要素を取得できないときの対処法

更新日：2023/08/08

HTMLタグが正しいのにJavaScriptでDOM要素が取得できない。
そんなときの対処法をお伝えします。

 

DOM要素を取得できない原因

HTML上で確実に記述されているのにDOM要素として取得できない原因で一番多いのは、取得したい要素が読み込まれる前に取得操作をしているケースです。

JavaScriptはHTMLのheadタグ内に記述されていることが多いです。
そして、取得したい要素はそれよりも後に記述されています。

JavaScriptは基本的に読み込まれた時点で実行されます。
しかし要素を読み込んでいないので、取得できないのは当たり前ですね。

 

対処方法

理屈的には、スクリプト読み込みをbodyの閉じタグの後に移動させることで動作します。
しかし、これはあまりよくない方法とみなされているので推奨されません。

HTMLを読み込んでDOMの準備が終わると、DOMContentLoadedイベントが発生します。
DOM要素を操作するときは、このイベントを次のようなコードで待ちます。

document.addEventListener("DOMContentLoaded",()=>{
  // DOM操作を行う
});

この他にもdefer属性を使用する方法があります。
次のページで紹介しているので、読んでみてください。

■【JavaScript】DOMが構築されてから実行する方法（async・defer属性対応）

 

構築されるのを待っているのに取得できない

DOMが構築されるのを待って取得しているのに取得できないときは、取得方法が間違えています。

DOM要素を取得するメソッドはいくつか用意されていますが、使用方法を間違えている可能性があります。
htmlを変更できるなら、まずはid属性を追加して、一番わかりやすい document.getElementById() で要素を取得してみてください。

それでも取得できないなら、根本的に何かがおかしいですね。
実際は単純なことが原因になっていることが多いです。
一度頭をリセットしてから、原因を究明していきましょう。

更新日：2023/08/08

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。