何をする書き方？
DOMは、ブラウザーがHTMLをプログラムから扱える形にしたものです。querySelectorで要素を選び、textContentで文字を書き換えます。HTMLの要素を用意してから実行する必要があります。
基本の形
const 要素 = document.querySelector("対象");
要素.textContent = "文字";querySelector一致する最初の要素を選ぶ。#messageid="message"の要素を指定。textContent要素の文字を取得・設定する。短い例で確かめる
app.js
const text = document.querySelector("p");
text.textContent = "こんにちは";結果
こんにちは
準備・実行方法を確認する
計算や配列の例は、ブラウザーの開発者ツールのConsoleに貼り付けて実行できます。画面操作の例は、必要なHTML要素を置き、defer付きscriptでapp.jsを読み込んでください。
もう少し詳しいコードを見る
app.js
// HTMLに <p id="message">待機中</p> を置く
const message = document.querySelector("#message");
if (message) {
message.textContent = "準備ができました";
}結果
画面の「待機中」が「準備ができました」に変わります。
ここで、書き換えてみよう
練習用の段落とボタンを用意しています。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「画面の要素を変える」の書き方はどれ？
少し変えてみよう
文字の代わりに、今日のひとことを表示してみましょう。
つまずいたら、ここを確認
対象が見つからないとnullになります。idの綴りと、スクリプトにdeferを付けたかを確認しましょう。
自分の言葉でメモ
記録はこのブラウザーに保存されます。