今日は，DOMについて説明します．

DOMとは

Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。 DOM の紹介 | MDN

具体的な例で説明すると，HTMLをJavaScriptで操作するときDOMというものを利用します．

html におけるid

DOM操作をするとき，どのタグ（オブジェクト/ノード）に対して操作を行うのかを特定する必要があります．特定をするための材料として，htmlタグにidを付加することができます．

付け方は，classと同じようにタグの属性として付けます．

<div id="app"></div>

id はclassとは違い，ドキュメント(HTMLファイル)内で一意でなくてはなりません．つまり，同じHTML内には同じ id を指定してはいけません．

JavaScript によるDOM操作

DOM操作方法の一つとして，Document.getElementById()とinnerHTMLを利用する方法があります．

Document.getElementById() | MDN

element.innerHTML | MDN

HTMLで以下のコードがあったとします．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>DOM操作</title>
  </head>
  <body>
    <div id="message"></div>
  </body>
</html>

<div id="message"></div>にテキストを追加するには以下のようなJavaScriptのコードでできます．

document.getElementById("message").innerHTML = "JavaScriptからHTMLを操作しています"

アプリケーション作成

最後に，いままでやってきたことの復習です．ウェブ上で動作する時計を作成します．

プログラム実装

JavaScriptで時間は，new Date() でDateオブジェクトの作成ができます．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>時計</title>
  </head>
  <body>
    <div id="clock"></div>
    <script>
    // Date オブジェクトの作成
    const time = new Date();
    // 時間，分，秒の取得
    const hours = time.getHours();
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();
    // clockに対して操作する．
    document.getElementById("clock").innerHTML = `${hours}:${minutes}:${seconds}`;
    </script>
  </body>
</html>

「 」で囲われた部分は，テンプレート文字列と呼ばれ文字列として扱われます．ただし${}` で囲われた部分に変数を書いた場合，その変数が展開されます．

結果はこのようになります．

f:id:Polyomino:20190128214518p:plain

しかし，このままだとJavaScriptのコードが一度しか実行されないため，時間が進みません．なので，１秒毎に更新されるようJavaScriptを書き換えます．

毎秒実行するには，setIntervalを使います．setInterval を利用するときに関数であったほうが扱いやすいので，描画内容をアップデートする関数を作ります．

    const update = () => {
      // Date オブジェクトの作成
      const time = new Date();
      const hours = time.getHours();
      const minutes = time.getMinutes();
      const seconds = time.getSeconds();
      document.getElementById(
        "clock"
      ).innerHTML = `${hours}:${minutes}:${seconds}`;
    };
    // 初回ロード時実行
    update();

update関数ができたので，setIntervalの引数として渡します．

    const update = () => {
      // Date オブジェクトの作成
      const time = new Date();
      const hours = time.getHours();
      const minutes = time.getMinutes();
      const seconds = time.getSeconds();
      document.getElementById(
        "clock"
      ).innerHTML = `${hours}:${minutes}:${seconds}`;
    };
    // 初回ロード時実行
    update();
    // 1000 ミリ秒（=1秒）ごとにupdateを実行
    setInterval(update, 1000);

これで，毎秒更新される時計が実装されました．

見た目を整える

JavaScript

時間がひと桁であった場合，表示される時間もひと桁です．少し気になるので，ひと桁であった場合0を追加して調整します．

      const minutes = `0${time.getMinutes()}`.slice(-2);
      const seconds = `0${time.getSeconds()}`.slice(-2);

f:id:Polyomino:20190128214626p:plain

2 秒であった場合，02として後ろから2文字文切り出します．16秒であった場合も016となって後ろから2文字分切り出されるので12となります．

CSS

このままだと文字が小さく見にくいので，文字を大きくします．

CSSでidに対するセレクタもあり，<div id="app"></div>に対して適用する場合，#app と書きます．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>時計</title>
    <style>
      #clock {
        font-size: 10rem;
      }
    </style>
  </head>
  <body>
    <div id="clock"></div>
    <script>
    const update = () => {
      // Date オブジェクトの作成
      const time = new Date();
      const hours = time.getHours();
      const minutes = `0${time.getMinutes()}`.slice(-2);
      const seconds = `0${time.getSeconds()}`.slice(-2);
      document.getElementById(
        "clock"
      ).innerHTML = `${hours}:${minutes}:${seconds}`;
    };
    // 初回ロード時実行
    update();
    // 1000 ミリ秒（=1秒）ごとにupdateを実行
    setInterval(update, 1000);
    </script>
  </body>
</html>

f:id:Polyomino:20190128214728p:plain

だいぶ見やすくなりました．しかし，左上にあるので中央に移動させます．

      body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }
      #clock {
        font-size: 10rem;
      }