DOM はページの部品の木
DOM（ドム、ドキュメント・オブジェクト・モデル）は、ブラウザが HTML を読み込んで作る、ページの部品の木です。JavaScript は、この DOM の文字やクラスを書き換えて、ページを動かします。
学食のメニューで、料理の数を表示する例を使い、DOM を選んで変える方法を学びます。
このレッスンのゴール
メモ
JavaScript で要素を選び、その文字やクラスを変えられる。
重要な言葉
| ことば | いみ | れい |
|---|---|---|
| DOM | ブラウザが作る、ページの部品の木 | |
| querySelector | CSS のセレクタで、要素を1つ選ぶ命令 | document.querySelector("#count") |
| textContent | 要素の中の文字 | |
| classList | 要素のクラスを足したり外したりする道具 | |
| 関数 | 名前を付けた、何度も使える処理 |
学生が入力するセルは、このプレビューでは空白です。
JavaScript は DOM の要素を選ぶ
document.querySelector("#count") のように、CSS のセレクタで要素を1つ選べます。querySelectorAll は、当てはまる要素をすべて選びます。
選んだ要素は、変数に入れておくと、何度でも使えます。要素の文字は、textContent で読み書きします。
例: 料理の数を表示する
<h2>今日の定食</h2>
<ul id="list">
<li class="dish">焼き魚定食</li>
<li class="dish">唐揚げ定食</li>
<li class="dish">野菜カレー</li>
</ul>
<p id="count">料理の数: 0</p>
クラスを付け外しすると見た目が変わる
文字を書き換えるほかに、クラスを付けたり外したりして、CSS の規則を切り替える方法があります。
見た目を変えるときは、JavaScript から直接色を書かず、クラスを切り替えるのが基本です。規則は CSS に、切り替えは JavaScript に分けます。
例: classList の3つの命令
| 命令 | はたらき | 結果 |
|---|---|---|
| add("hidden") | クラスを付ける | hidden が付く |
| remove("hidden") | クラスを外す | hidden がなくなる |
| toggle("hidden") | あれば外し、なければ付ける | 付け外しが入れ替わる |
学生が入力するセルは、このプレビューでは空白です。
練習: 料理を隠す
<ul>
<li class="dish">焼き魚定食</li>
<li class="dish">唐揚げ定食</li>
</ul>
よくある間違い
注意
textContent に HTML のタグを書くと、タグとして働くと考える人がいます。textContent は、文字としてそのまま入れます。<b> と書けば、その文字が画面に出ます。
関数は処理に名前を付ける
同じ処理を何度も使うときは、関数にします。function のあとに名前と、波括弧で囲んだ処理を書きます。
関数は、呼ばれるまで動きません。呼ぶときは、名前のあとに丸括弧を付けます。
練習: 関数を呼ぶ
<p id="msg"></p>
待ち受けは addEventListener で足す
addEventListener は、ある要素でイベントが起きたら、関数を呼ぶ、と登録する命令です。button.addEventListener("click", say) のように書きます。
1つのスクリプトに待ち受けがいくつあるかを数えると、そのページが何に反応するかが分かります。
例: クリックで関数を呼ぶ
<button id="b">押す</button>
<p id="msg"></p>
ラボのスクリプトを読む
ラボのページの app.js を、スクリプトが読みます。関数の名前と、待ち受けるイベントと、id で探す要素を出します。
出る言葉は英語です。function は関数、listens for は待ち受けるイベント、looks up id は id で探す要素です。
スクリプトの中身を読む
docker exec jupyter python3 steps/js.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。