JavaScript DOM操作練習してみた

今回はJavaScriptのDOM操作を練習してみます。

DOMとは

DOM (Document Object Model) とは、すべての HTML または XML 文書を表現・操作する API です。 DOM はブラウザーで文書構造をノードのツリーとして読み込み、それぞれのノードを文書の一部 (例えば要素、テキスト文字列、コメント) として表します。引用元

この仕組みを使ってJavaScriptを使ってHTMLの要素を取得、操作します。

実践

早速やってみます。
まず適当にファイルを作りHTMLを書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practice</title>
</head>
<body>

<p id="text">ここが変わります</p>
<button id="button">クリック</button>

</body>
</html>

ブラウザで開いてみるとこんな感じです。

こうなりました。
まだhtmlしか書いてないので当然クリックしても何も起きません。

ここから、ボタンをクリックしたら「ここが変わります」の部分が変わるようにしていきます。
とりあえずJavaScriptのコードを書き込む場所を作ります。

<body>

<p id="text">ここが変わります</p>
<button id="button">クリック</button>

  <script>

  </script>
</body>

ちょっと練習する用なのでbodyタグの一番下にscriptタグを書いて直接htmlファイルに書きます。
script内をこのようにします。

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const text = document.getElementById("text");
      const button = document.getElementById("button");

      button.addEventListener('click', () => {
        text.innerText = ('変わった？');
      });
    });
  </script>

すると

変わりましたね。
ではscriptタグの中を見ていきましょう。
documentには現在表示しているページのすべてのHTMLやCSS、JavaScriptなどの文章が入っています。
試しにscript内にconsole.log(document);を入れてみると

コンソールにファイルの内容が表示されました。
addEventListenerはイベントを実行するメソッドです。
引数のDOMContentLoadedイベントは HTML ページの読み込みが完了しHTML のパース(解析)が完了してDOM ツリーの構築が完了した時点で発生するイベントです。
正直、まだあまり理解できていないのでおまじないだと思ってます。

さらに中を見ていきます。
getElementByIdでhtml要素を取得します。
何を頼りに要素を探すかというと、その名の通りIdです。
そのためhtml要素にはidを設定している必要があります。
const text = document.getElementById("text");で、textというidが付いている要素を取得してきて、textという定数に代入しています。
const button = document.getElementById("button");も同様です。
button.addEventListener('click', () => {定数buttonをクリックしたときにイベントが起きます。
text.innerHTML = ('変わった？');定数textを`innerHTMLで要素を置き換えています。

流れとしてはこんな感じです。
他にもドットインストールで簡単なゲームを作ったりすればどんなことができるかわかりやすいと思います。