DOMContentLoadedが必要なケースについて

DOMContentLoadedが必要なケースはどのような場合でしょうか？

js
1'use strict';
2
3{
4
5  const words = [
6    'apple',
7    'sky',
8    'blue',
9    'middle',
10    'set',
11  ];
12
13  let word = words[Math.floor(Math.random() * words.length)];
14  let loc = 0;
15  let score = 0;
16  let miss = 0;
17  const timeLimit = 3 * 1000; 
18  let startTime;
19  const target = document.getElementById('target');
20  const scoreLabel = document.getElementById('score');
21  const missLabel = document.getElementById('miss');
22  const timerLabel = document.getElementById('timer');
23  let isPlaying = false;
24
25
26  function updateTarget(){
27    let placeholder = '';
28
29    for(let i = 0; i < loc; i++){
30      placeholder += '_';
31    }
32    target.textContent = placeholder + word.substring(loc);
33  }
34
35  function updateTimer(){
36    const timeLeft = startTime + timeLimit - Date.now();
37    timerLabel.textContent = (timeLeft / 1000).toFixed(2);
38
39    const timeoutId = setTimeout(() => {
40      updateTimer();
41    },10);
42
43    if(timeLeft < 0){
44      isPlaying = false;
45      clearTimeout(timeoutId);
46      timerLabel.textContent = '0.00';
47      setTimeout(() => {
48        alert('Game Over');
49      },100);
50    }
51  }
52  
53  window.addEventListener('click', () => {
54    if(isPlaying === true){
55      return;
56    }
57
58    isPlaying = true;
59
60    updateTarget();
61    startTime = Date.now();
62    updateTimer();
63  });
64
65  window.addEventListener('keyup',e =>{
66    if(isPlaying !== true){
67      return;
68    }
69    if(e.key === word[loc]){
70      loc++;
71
72      if(loc === word.length){
73        word = words[Math.floor(Math.random() * words.length)];
74        loc = 0;
75      }
76
77      score++;
78      scoreLabel.textContent = score;
79      updateTarget();
80    }else{
81        miss++;
82        missLabel.textContent = miss;
83      }
84    
85  });   
86
87
88}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing Game</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <p id="target">click to start</p>
  <p class="info">
    Letter count<span id="score">0</span>,
    Miss count: <span id="miss">0</span>,
    Time left:<span id="timer">0</span>
  </p>
  <script src="js/main.js"></script>
</body>
</html>

上記のjavascriptのコードは簡易なタイピングゲームを作成したものです。
疑問な点なのですが、javascriptのファイルの方では、document.getElementByIdによって、HTML要素を取得していますが、DOMContentLoadedによってHTMLを読み込まずにいるにもらず、何故要素を取得できるのでしょうか？

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

回答2件

ベストアンサー

疑問な点なのですが、javascriptのファイルの方では、document.getElementByIdによって、HTML要素を取得していますが、DOMContentLoadedによってHTMLを読み込まずにいるにもらず、何故要素を取得できるのでしょうか？

HTMLは、（基本的には）書いてある順に実行されます。JavaScriptが<body>の最後で読み込まれているため、それより上にあるエレメントはこのJavaScriptからその場で読み取り可能です。

投稿2019/08/16 06:43

編集2019/08/16 06:44

maisumakun

総合スコア145183

aae_11

2019/08/16 06:47 編集

ご回答ありがとうございます。そういうことだったのですね。ちなみになのですが、となりますとDOMContentLoadedが必要になる場合というのは、どのような場合になってくるのでしょうか？

m.ts10806

2019/08/16 06:53 編集

> JavaScriptが<body>の最後で読み込まれているため、それより上にあるエレメントはこのJavaScriptからその場で読み取り可能です。これから「<body>より上（例えばhead内）にJavaScriptの記載を記述したい場合」と読み解くことはできませんか。それにドキュメントからも読み解けませんかね。 https://developer.mozilla.org/ja/docs/Web/Events/DOMContentLoaded >DOMContentLoaded イベントは、最初のHTMLドキュメントの読み込みと解析が完了した時に、スタイルシートや画像、サブフレームの読み込みが終わるのを待たずに発火します。

aae_11

2019/08/16 06:54

あーいえ、それは思ったのですが、念の為、お聞きしておこうと思いまして。理解の確認ができ、良かったです。

m.ts10806

2019/08/16 06:55

別回答にしておきます。

m.ts10806

2019/08/16 07:05

ただ、 >あーいえ、それは思ったのですがこれは思っただけでは誰にも伝わらないので、きちんと「自身が理解したこと」として書いてください。でないと無駄足が増えます。

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

まずはドキュメント確認からです。

DOMContentLoaded

DOMContentLoaded イベントは、最初のHTMLドキュメントの読み込みと解析が完了した時に、スタイルシートや画像、サブフレームの読み込みが終わるのを待たずに発火します。

このことから「HTML読み込みが終わったら発生するイベント」ということが分かります（CSSや画像は別）
既に出ている回答から、「上から順番に実行される」ことになるので、

</body>の直前に置くのであればその時点で全ての読み込みが完了しているため「必要ない」と言えるわけです。

逆に「<head>内」や「操作したいHTML要素が出てくる前」に書きたいのでしたらそもそもHTMLの読み込みも解析も行われていないので必要です(入れないと要素の操作はできません）

これはイベントの概念と発火タイミングは全く同じではありませんが、window.onloadやjQueryの$(document).readyにも同じことが言えます。

HTML内のどこでJavaScriptの記述を置きたいかで決めてください。

※ちなみに私は</body>直前に置くようにしていますが、$(document).readyは必ず書くように癖づけています。どこに書いても間違いなく実行させるためです。

投稿2019/08/16 06:59

編集2019/08/16 07:00

m.ts10806

総合スコア80850

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

DOMContentLoadedが必要なケースについて

関連した質問