DOM操作とイベントを理解しよう【RaiseTech フロントコース#4 Part2】

2021.06.282021.08.27

悩んでいる人

DOMってなに？イベント発火？？

本記事では、そんな悩みをもった方向けにDOM操作とイベントについてまとめました。

Web開発だけではなくWeb制作でもかなり重要な概念になるのでしっかり学んでおきましょう〜。

本記事は、RaiseTechのフロントエンドエンジニアコースの受講記でもあります。
こちらの記事は、第4回の講義のまとめとなります。

DOM操作

DOMとはドキュメントオブジェクトモデルの略です。
ブラウザがHTML文書を解析してDOMと呼ばれるデータ構造に変換します。

そして、JavaScriptを使うとDOMにアクセスすることができ、DOMにデータを追加したり編集したり削除しちりすることができるようになります。

実際に、DOMを操作してみます。

  <body>
    <div>
      <h1 id="title">色々な国のあいさつ</h1>
      <ul id="list">
        <li>こんにちは</li>
      </ul>
    </div>
  </body>

まずはHTMLファイルを用意します。表示が下記のとおりになります。

では、これに別の国の挨拶をJavaScriptで追加してみます。

  const content = document.createElement("li");
  content.innerText = "Hello";
  const list = document.getElementById("list");
  list.appendChild(content);

1行目で新しい要素liを作成して、変数contentに代入しています。

2行目でliの中身のテキストを、”Hello”と入れています。

この時点でcontentの中身を確認すると、

console.log(content);
//<li>Hello</li>

となっています。

3行目で、idにlistを持っている要素を、変数listに代入しています。

4行目でlistの中にappendChildで先程作成したcontentを末尾に追加しています。

ブラウザで確認すると”こんにちは”の後ろに”Hello”が追加されているのがわかりますね。

このように、JavaScriptを使えばHTML文書に対して操作して変更をさせることができるのです。

DOM操作はWeb制作でも必要な知識なので、最低限押さえておきましょー

イベント

イベントとは、システム上で生じた動作や出来事のことです。単語の意味そのままなので問題ないかと、

例でいうと、ユーザーがボタンをクリックしたときや、ブラウザを読み込んだときなどのことイベントと読んでいます。

あとこのあたりの言葉は覚えておいたほうがよいです。

・イベント発生 → 「イベントが発火する」
・イベントハンドラー→ イベントが発火したときの処理
・イベントリスナー → イベントの発生を監視する

実際にどんなことができるのかをみていきましょー

  <body>
    <h1>イベント</h1>
    <button id="js-button">ボタン</button>
  </body>

  const button = document.getElementById("js-button");
  button.addEventListener("click", () => {
    console.log("イベント発火！！");
  }, false);

1行目でボタンの要素を取得します。

2行目でaddEventListenerがでてきます。
addEventListenerを使うことで様々なイベント処理を実行することができます。

第1引数にはイベントの種類が入ります。（今回はclick）
こちらにイベントの種類一覧がまとまっております。（https://developer.mozilla.org/ja/docs/Web/Events）

第2引数には、イベントハンドラー（関数を指定）することができ、ここでこのイベントが発生したときの処理を記述します。

第3引数には、イベント伝播の方式を「true / false 」で設定できるのですが、基本はfalseで設定しておきましょー！

ちなみに、ブラウザが読み込まれたときにイベント処理を行うためには下記のように記述します。

  window.addEventListener("load", () => {
    console.log("イベント発火！!!!!!！");
  });

補足的な説明

stopPropagation()

バブリングを停止するメソッドです。

そもそもバブリングって何っていうと、子要素のイベントが親、親の親へと伝播することをいいます。

本来であれば、alertで緑色エリアをクリックしたときにイナーとだけ表示させたちのですが、親要素にも伝播してアウターとalertで表示されてしまいます。

これを下記のように記述することでバブリングを停止することができます。

  const innerButton = document.getElementById("js-inner");
  innerButton.addEventListener("click", (e) => {
    e.stopPropagation();
    alert("イナー");
  });