Day 4・ブラウザを動かす — JSでページを操作する

DOM — JSがHTMLを触るための地図

ページを人形劇の舞台、JSを操り手にたとえて、document.querySelectorで要素をつかみ、.textContentで文字を書き換える流れを読めるようにする。

ページは人形劇の舞台

HTMLで作ったページを「人形劇の舞台」だと思ってください。ボタン、見出し、入力欄は、舞台に立っている人形たちです。そのままだと人形は動きません。動かす「操り手」が必要です。その操り手がJavaScriptです。

でもJSは、いきなり人形をつかめるわけではありません。まず「どの人形か」を指さして選ぶ必要があります。この“指さして選ぶための地図”がDOM(ドム)です。DOMは Document Object Model の略で、ブラウザがHTMLを「JSから触れる形」に変換したもの、と考えれば十分です。

なぜDOMが要るのか

HTMLはただの文字列(テキスト)です。文字列のままだと「3番目のボタンだけ色を変えて」とは頼めません。ブラウザがHTMLを部品のかたまり(オブジェクト)に組み立て直してくれるから、JSは一個ずつ名指しで触れるのです。それがDOM。

要素を1つつかむときは document.querySelector を使います。カッコの中に、CSSと同じ書き方で「どれ?」を渡します。#id はid、.class はクラス、タグ名はそのまま、という約束です。

HTML

<h1 id="title">こんにちは</h1>
<button class="btn">押す</button>

この舞台(HTML)から要素を選ぶ

JAVASCRIPT

const title = document.querySelector("#title");
const btn = document.querySelector(".btn");
console.log(title);

#title と .btn をJSでつかんで変数に入れる

つかめないと null

querySelector は、指定した要素が見つからないと null(何もない)を返します。「Cannot read properties of null」というエラーは、たいてい“セレクタの綴りミス”か“HTMLが読み込まれる前にJSが走った”のどちらかです。まずはそこを疑いましょう。

つかんだ要素の中身の文字を書き換えるには .textContent に代入します。= の右に新しい文字を入れるだけ。人形に新しいセリフを持たせるイメージです。

JAVASCRIPT

const title = document.querySelector("#title");
title.textContent = "ようこそ！";

見出しの文字が「こんにちは」→「ようこそ！」に変わる

AIにはこう聞く

「このJSコードを1行ずつ日本語で説明して。document.querySelector と .textContent が何をしているか、初心者にわかるように」

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

答えられれば、面接で説明できる状態に一歩近づきます。

document.querySelector("#title") は何をしている？

要素の中の文字を書き換えたいとき、どれを使う？

DOMとは何か、人形劇のたとえを使って自分の言葉で説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。