DOM
初級読み方：ドム｜英語：DOM
Document Object Model の略で、ブラウザがHTMLを操作できる部品として管理する仕組みだよ。
やさしい説明
DOM（ドム）とは、HTMLをJavaScriptから操作するための仕組みです。
Document Object Model の略。ブラウザがHTMLを読み込むと、要素をツリー構造（木の枝のような構造）で管理します。JavaScriptはこのツリーを操作してページの内容を変更します。
「ボタンをクリックしたら文字が変わる」「フォームに入力した内容をリアルタイム表示する」——これらはすべてDOMを操作することで実現しています。
図解
具体例・使い方
// 要素を取得
const btn = document.getElementById("myBtn");
const items = document.querySelectorAll(".item"); // 複数取得
// テキストを変更
btn.textContent = "クリック済み";
// スタイルを変更
btn.style.backgroundColor = "green";
btn.classList.add("active"); // クラスを追加
// 新しい要素を追加
const p = document.createElement("p");
p.textContent = "新しい段落";
document.body.appendChild(p);
// 要素を削除
btn.remove();要素の取得方法の使い分け
getElementById("id")— IDで1つ取得。最も高速querySelector("セレクタ")— CSSセレクタで最初の1つを取得querySelectorAll("セレクタ")— CSSセレクタで全て取得（NodeList）getElementsByClassName("class")— クラス名で取得（HTMLCollection）
現代では querySelector / querySelectorAll が最もよく使われます。CSSと同じセレクタ記法で書けるため、".card"・"#title"・"input[type='text']" のように柔軟に要素を指定できます。
いつ使う？
ボタンをクリックしたら文字を変える、フォームの入力値を取得する、要素を追加・削除する——JavaScriptでページを動的に変更するときは常にDOMを操作しています。
間違いやすいポイント
❌ HTMLが読み込まれる前にDOM操作する
<head> の中に <script> を書くと、HTMLがまだ読み込まれていないため要素が null になります。<body> の末尾に書くか、DOMContentLoaded イベントを使いましょう。
// ❌ headにscriptを書くと要素がまだない
document.getElementById("btn"); // null!
// ✅ bodyの最後にscriptを書くか、DOMContentLoadedを使う
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("btn"); // OK
});
// ✅ scriptタグにdeferを付ける（HTML解析後に実行される）
// <script src="main.js" defer></script>よくある疑問
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読み込み前にスクリプトが実行されているのが原因です。
関連用語
📖 関連レッスン
レッスンを見る →