DOM操作とは何か理解しよう
DOMとはブラウザがHTMLを解析して作り出す「ページの構造データ」です。
JavaScriptではこのDOMを操作することでテキストを書き換えたり画像を差し替えたりできます。
最初のステップはHTML要素を取得することです。
document.getElementByIdやquerySelectorを使うと特定の要素を読み込めます。
画面の内容を書き換える仕組み
取得した要素に対してtextContentで文字を変更したりinnerHTMLでHTMLを挿入したりできます。
どちらも使えると便利ですが、innerHTMLは意図しないHTMLを入れてしまうとレイアウト崩れの原因になるため、最初はtextContentで練習するのがおすすめです。
See the Pen DOM操作入門（HTML要素を取得しよう） by Syo Yanai (@h1-tech-japan) on CodePen.
クラスの付け替えでデザインを変える
classList.addとremoveを使えば特定のCSSクラスを付けたり外したりできます。
ボタンのクリックでサイズ変更や色変更といったインタラクションを作れるようになり、コードに動きが加わって一気に楽しくなります。