JS
DOM
初級読み方：ドム｜英語：DOM
Document Object Model の略で、ブラウザがHTMLを操作できる部品として管理する仕組みだよ。いつ使う？ JavaScriptでページの内容を変えたい（テキスト変更、要素追加・削除）ときに使うよ。間違いやすいポイント: scriptタグがheadにあるとDOM構築前に実行されてnullエラーになるよ。scriptは</body>の直前に書くか、defer属性を付けよう。
やさしい説明
DOM（ドム）とは、HTMLをJavaScriptから操作するための仕組みです。
Document Object Model の略。ブラウザがHTMLを読み込むと、要素をツリー構造（木の枝のような構造）で管理します。JavaScriptはこのツリーを操作してページの内容を変更します。
図解
具体例・使い方
// 要素を取得
const btn = document.getElementById("myBtn");
// テキストを変更
btn.textContent = "クリック済み";
// スタイルを変更
btn.style.backgroundColor = "green";
// 新しい要素を追加
const p = document.createElement("p");
p.textContent = "新しい段落";
document.body.appendChild(p);いつ使う？
ボタンをクリックしたら文字を変える、フォームの入力値を取得する、要素を追加・削除する——JavaScriptでページを動的に変更するときは常にDOMを操作しています。
間違いやすいポイント
❌ HTMLが読み込まれる前にDOM操作する
// ❌ headにscriptを書くと要素がまだない
document.getElementById("btn"); // null!
// ✅ bodyの最後にscriptを書くか、DOMContentLoadedを使う
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("btn"); // OK
});よくある疑問
Q: DOMとHTMLの違いは？
A: HTMLはファイルに書かれたコード、DOMはブラウザがHTMLを解釈して作ったオブジェクトです。JavaScriptはDOMを操作します。
Q: 要素を取得する方法は？
A: document.querySelector('.class') が最も汎用的です。IDならdocument.getElementById('id')も使えます。
Q: DOM操作でnullエラーが出るのはなぜ？
A: 要素が見つからないとnullが返ります。IDのスペルミス、またはHTML読み込み前にスクリプトが実行されているのが原因です。
関連用語
📖 関連レッスン
レッスンを見る →