Javascript DOM イベント 学んでみた

そもそもDOMとは

HTMLのタグをツリー構造で保持しているもの

こんなかんじでHTMLはタグをツリー構造で保持している
JavaScriptではこれを操作することができる

操作することで何ができるの？

• HTMLの内容を書き換えることができる
• HTMLの内容を取得してくることができる
• 新しいHTML要素（タグ）を追加したり削除したりできる

これだけではなく多くのことができるのがDOM

よく使う文法と使い方

メソッド

「変更したい箇所のセレクタを指定するもの」として覚えるといいかも
()の中には取ってきたいタグなどを書く
""をセレクタ名につけるのを忘れないように

elem = document.querySelector("セレクタ名")

id .class HTMLタグなどを指定

elem = document.querySelectorALL("セレクタ名")

同様にセレクタを指定して配列を取得してくる

elem = document.querySelector("#id名")

#をつけることで、htmlの属性にあったidで指定して上げることもできる

使い方

「要素.内容名」「要素.属性名」の形式で取り出す

.textContent //中身のテキストを変更できる
.value       //<input>などに入力された文字列
.innnerHTML  //htmlタグ付きで変更できる
.style       //cssのスタイルの操作
.className   //class属性を変更する
.href        //リンク先の変更

タイトルにもあるが、先程のメソッドで代入した定数を左に書き、右にこれらを書く

textContent

要素で指定したタグのテキストの中身を表す。

例

要素.textContent = 変更後の文字

このように代入することで、本来要素で指定した中身が変更後の文字に代入されて変更される

value

ユーザーがinputなどのフォームで入力した値を表す。

ユーザーの入力を取得する例

    let 任意の変数名 = 要素.value

これで変数にユーザーの入力を格納することができる

フォームの中身を変更する例

    要素.value = 変更後の文字

あまりこれを使うことはないような気がするが、一応このようにしてユーザーの入力を変更することもできる

innerHTML

要素の中身を、タグも含めた形で表す

例

    要素.innnerHTML = "<strong>太字のテキスト</strong>";

このようにタグも含めて追加するときに使う

style

要素のCSS（デザインや見た目）のスタイルを表します。

例

要素.style.color = "red";          // 文字色を赤にする
要素.style.backgroundColor = "blue"; // 背景色を青にする

このようにすると、状況に応じてcssを書き換えることもできる。
触っているのはcssだがこのときの要素も同じくhtmlタグを指定する。
つまりcssインラインとして変更していると捉えることもできる。

className

htmlタグ内のclass属性を変更することができる

例

    要素.className = "active-button";

htmlの中の要素であったclass = を変更することができる

href

htmlでおなじみのhrefつまりリンク先を変更できる

例

    要素.href = "https://www.google.com";

これを使うことによって、ボタンやユーザーの操作によってリンク先を変更できる

createElement

ユーザーの操作に合わせて、新しいHTML要素（タグ）をゼロから作り出す命令

「状況に応じて画面の部品を『増やす』とき」にめちゃくちゃ重宝します。

新しい要素の作成

    const elem = document.createElement(作りたいhtmlタグ);

まずは新しく作りたいタグをこのように記述して定数に代入する

実際に要素の追加

    クエリセレクタなどで拾ったノード.入れる場所(createElementの定数);

下で詳しく説明します

クエリセレクタなどで拾ったノード

そもそもノードとは、上の画像でも示したDOMの構造の１つの単体のことを表す

またクエリセレクタは先程も話したように、変更したいセレクタを指定するものなので、後述する入れる場所の大元をここで指定してあげる必要がある。

教科書ではgetElementByIdというものが使われているが、これはセレクタではなくidで指定するものなので、クエリセレクタでも同じように使うことができる。

一旦は、「どこに新しいものを追加したいの？」という意味で捉えておけば良さそう

例

    const str = document.querySelector("#message");

    str.入れる場所(createElementの定数);

とりあえずで入れてみるとこうなる

入れる場所

prepend先頭に追加
append 末尾に追加
before前に追加
afterあとに追加

ちなみに、prependとappendはノードの中で先頭か末尾か選ぶことになるが、beforeとafterはとある特定の要素の前後に入れることになる(listなど)

例

    str.append(createElementの定数);

ここまで埋まってきた。

cleateElementの定数

これはそのままで、一番上で指定した定数を入れることで新しく要素を追加している ただ、タグのみを追加することはないので、結局下に中身は作ることになる。

例

    const elem = document.createElement("h1");
    elem.textContent = "こんにちは";

    str.append(elem);

完成形はこうなる

ちなみに

ここからはAIに聞いた話なので嘘を疲れているかもしれないが

innnerHTMLはあまり使わないらしい。
というのも、これによって脆弱性になる危険があるそう

また、DOM自体「ただ変更したいから」という理由でつかうのあまりない。
下で説明するイベントなど状況におおじて変化するものでしか使わない(らしい)

イベントリスナー

イベントリスナーとは

イベント(クリック、マウスオーバーなどのユーザーの操作)を起点としてコードを実行するもの

使い方

クエリセレクタの定数.addEventListner("イベント名",() => {
    //実行させたいコードを書く
    [オプション(あれば)]
    });

必要なもの

• クエリセレクタで指定した変数(どんなものを変更させたいのか)
• addEventListnerのコード
• イベント名
• 動かしたいコード
• オプション(あれば)

1.クエリセレクタ

HTML上で実際に動かしたいものをクエリセレクタによって指定する

例: ボタンをイベントリスナーしたいとき

const btn = document.querySelector("button");

このようにクエリセレクタを一度定数に格納する

2.addEventListener

イベントリスナーの軸となる文法。
わざわざ関数名を付ける必要はないので、アロー関数で記載するのが良い

クエリセレクタの定数.addEventListener("イベント名", () => {
    //コード
    })

ここに実行したいコードを記載することで、イベントが起こったときにクエリセレクタで記載した部分に実行されるコードが完成

オプション

省略可能　その名の通り実行の時の追加のルールを指定できる
例えば、{once: true}で一度だけの実行をすることができる