JavaScriptのDOM組み込みオブジェクトを徹底解説！初心者が知っておくべき基本と活用法
山崎講師
こんにちは。ゆうせいです。
今回は、JavaScriptを使ってWebページを動かす上で超重要なDOM（Document Object Model）に関する組み込みオブジェクトについて、初心者の方にもわかりやすく解説していきます！
JavaScriptの組み込みオブジェクトにはいろいろありますが、DOM関連のものは「Webページに触るための道具」です。
DOMってなに？
まず、「DOMって何？」というところからはじめましょう。
DOM（Document Object Model）は、Webページをオブジェクトとして扱う仕組みのことです。
たとえば、次のようなHTMLがあったとします。
<body>
<h1 id="title">Hello</h1>
</body>
これをJavaScriptで操作するには、「document」というオブジェクトを使って、まるで「木の枝をたどるように」要素にアクセスします。
代表的なDOM組み込みオブジェクト一覧
| オブジェクト名 | 役割・用途 |
|---|---|
window | ブラウザのウィンドウ全体を表す |
document | Webページ（HTMLドキュメント）全体を表す |
Element | HTMLの要素（タグ）を表す |
Node | DOMツリーのノードを表す（テキストなども含む） |
NodeList | ノードの一覧（配列っぽいけど配列ではない） |
HTMLCollection | HTML要素のコレクション（これも配列ではない） |
Event | イベントオブジェクト（クリック・キーボードなど） |
HTMLElement | 特定のHTML要素型の親クラス（例：HTMLDivElement） |
それぞれを詳しく解説！
1. windowオブジェクト
JavaScriptの最上位オブジェクトで、ブラウザのタブそのものを指します。
console.log(window.innerWidth); // ウィンドウの幅
ちなみに、
alert()やsetTimeout()などもwindow.alert()の省略形です！
2. documentオブジェクト
window.document は、Webページの内容そのもの（HTMLドキュメント）を指します。
document.getElementById("title").textContent = "こんにちは！";
ページ内の要素にアクセスする入り口です！
3. Elementオブジェクト
これは、HTMLのタグ1つ1つを表すオブジェクトです。
let el = document.querySelector("h1");
el.style.color = "red";
ElementはHTMLElementの親クラスにあたります。
4. Nodeオブジェクト
DOMの構造は「ノード（節）」として表現されます。
<div>→ 要素ノード"こんにちは"→ テキストノード
というように、すべての要素や文字列が「ノード」として扱われます。
let node = document.getElementById("title").childNodes[0];
NodeはElementよりも広い概念です。
5. NodeListとHTMLCollectionの違い
どちらも複数の要素を格納した「配列っぽいもの」ですが、違いに注意！
| 特徴 | NodeList | HTMLCollection |
|---|---|---|
| 作られる関数例 | querySelectorAll() | getElementsByTagName()など |
| 更新される？ | いいえ（静的） | はい（動的） |
| forEach使える？ | 使える（モダンブラウザ） | 使えない |
6. Eventオブジェクト
クリックやキーボード入力など、イベントの情報を保持するオブジェクトです。
document.addEventListener("click", function(event) {
console.log(event.target); // クリックされた要素
});
eventという引数は、イベントに関するすべての情報を含んでいます。
7. HTMLElementとそのサブクラスたち
HTMLElement は、すべてのHTML要素の共通の型であり、さらに具体的な要素ごとに次のようなクラスがあります。
| クラス名 | 対応するHTML要素 |
|---|---|
HTMLDivElement | <div> |
HTMLInputElement | <input> |
HTMLButtonElement | <button> |
let btn = document.querySelector("button");
console.log(btn instanceof HTMLButtonElement); // true
DOMの階層構造：図でイメージしよう
window
└─ document
└─ <html>
└─ <body>
├─ <h1>
│ └─ TextNode ("Hello")
└─ <p>
└─ TextNode ("Welcome")
このように、ツリー構造（木構造）になっているのがDOMの特徴です。
よくある操作例：実践で使える！
要素を取得する
document.getElementById("title")
document.querySelector(".item")
要素を作る・追加する
let p = document.createElement("p");
p.textContent = "新しい段落";
document.body.appendChild(p);
クラスやスタイルを変更する
el.classList.add("active");
el.style.backgroundColor = "blue";
今後の学習の指針
DOMの操作に慣れてきたら、以下のテーマに進んでみましょう。
- イベント伝播とイベント委譲（Event Delegation）
- DOMの操作パフォーマンス最適化
- Virtual DOMの考え方（Reactなどで登場）
- セキュリティとDOM操作（XSSなど）
DOMは「JavaScriptがWebページとつながる接点」です。ここをマスターすることで、インタラクティブでリッチなページ作成が可能になります。
気になる技術や具体的な例があれば、またどんどん聞いてくださいね！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
