エキスパート：実技問題（HTML作成、CSS読込と作成、画像の表示、JavaScriptの読込、レスポンシブWebデザイン対応）あるHTML文書のhead内で<script src="main.js"></script>のように通常の方法でJavaScriptファイルを読み込み、main.js内でdocument.getElementById("btn")によりDOM要素を取得する処理を記述したところ、要素の取得に失敗しnullが返るエラーが発生した。この原因として最も考えられるものはどれか。
- ✓script要素がhead内にあり、HTML本体の読み込みより先にJavaScriptが実行されるため対象の要素がまだ存在しない
- BJavaScriptファイルの拡張子が間違っているため
- CgetElementByIdはid属性を持つ要素にしか使用できないため
- DHTML5ではgetElementByIdが廃止されたため
解説
head内に通常の方法で記述されたscript要素はHTMLパース中に同期的に実行されるため、まだbody内の対象要素がDOMに構築されていない。defer属性の付与やbody末尾への配置、DOMContentLoadedイベントの利用で解決できる。
根拠出題範囲：実技問題「JavaScriptの読込」
のように通常の方法でJavaScriptファイルを読み込み、main.js内でdocument.getElementById(\"btn\")によりDOM要素を取得する処理を記述したところ、要素の取得に失敗しnullが返るエラーが発生した。この原因として最も考えられるものはどれか。","text":"あるHTML文書のhead内でのように通常の方法でJavaScriptファイルを読み込み、main.js内でdocument.getElementById(\"btn\")によりDOM要素を取得する処理を記述したところ、要素の取得に失敗しnullが返るエラーが発生した。この原因として最も考えられるものはどれか。","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"正解: script要素がhead内にあり、HTML本体の読み込みより先にJavaScriptが実行されるため対象の要素がまだ存在しない。head内に通常の方法で記述されたscript要素はHTMLパース中に同期的に実行されるため、まだbody内の対象要素がDOMに構築されていない。defer属性の付与やbody末尾への配置、DOMContentLoadedイベントの利用で解決できる。（根拠: 出題範囲：実技問題「JavaScriptの読込」）","citation":"https://www.sikaku.gr.jp/web/wc/"}}}のように通常の方法でJavaScriptファイルを読み込み、main.js内でdocument.getElementById(\"btn\")によりDOM要素を取得する処理を記述したところ、要素の取得に失敗しnullが返るエラーが発生した。この原因として最も考えられるものはどれか。","item":"https://swipeandpass.com/exams/web-creator-skills-qualification-test/questions/ex-023"}]}