DOMとは
Document Object Model の略。HTMLをJavaScriptから自由自在に操作するための仕組み（ツリー構造）のことです。
要素の取得メソッド
HTML内の要素を特定して、変数に保存するために使います。
| メソッド | 説明 | 例 |
|---|---|---|
getElementById() |
指定した id を持つ要素を1つ取得。 |
"header" |
querySelector() |
CSSセレクタを使って要素を1つ取得。 | ".item", "#main" |
querySelectorAll() |
該当するすべての要素を取得。 | "p", ".boxes" |
取得した要素の操作
要素を取得した後、内容や見た目を変更できます。
const title = document.getElementById("main-title");
// テキストの変更
title.textContent = "新しいタイトル";
// スタイルの変更
title.style.color = "red";
title.style.fontSize = "24px";
// クラスの追加
title.classList.add("active");