JavaScriptのDOM：Webページを操作する仕組み

Week 2の準備として、DOMについて学習しました。クリックカウンター作成に必要な、Webページを操作する基本的な仕組みです。

DOMとは

DOM = Document Object Model（ドキュメントオブジェクトモデル）

Document（ドキュメント）

  • 文章、記録という意味
  • Webページ全体を指す

Object Model（オブジェクトモデル）

  • Webページの要素やコンテンツなどをツリー構造で表現したモデル

DOMの仕組み

ツリー構造とは

HTMLは階層構造になっています：

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <h1 id="title">見出し</h1>
    <p class="text">段落</p>
  </body>
</html>

DOMは、これを以下のような「木」の構造で表現します：

document
  └── html
       ├── head
       │    └── title
       └── body
            ├── h1 (id="title")
            └── p (class="text")

JavaScriptで操作可能

各オブジェクトのメソッドやプロパティをプログラムから利用することでDOMを操作できます。

// h1要素を取得
const title = document.getElementById('title');

// h1の内容を変更
title.textContent = "新しい見出し";

DOMの変更は、Webページに即座に反映されます。

getElementById：IDで要素を取得

getElementById は、Webページで特定の要素を取得できるメソッドです。

構文

document.getElementById('id名')
  • document: 今表示しているWebページ全体
  • Webページ全体の中から、指定したIDを取得

使用例

HTML:

<h1 id="title">こんにちは</h1>
<p id="message">メッセージ</p>

JavaScript:

// id="title"の要素を取得
const titleElement = document.getElementById('title');

// 内容を変更
titleElement.textContent = "さようなら";

// 結果：<h1 id="title">さようなら</h1>

特徴

  • IDで指定するため、1つの要素だけを取得
  • HTMLのID属性はページ内で一意（重複しない）

querySelector：セレクタで要素を取得

querySelector は、Webページで特定の要素を取得するメソッドです。

getElementByIdとの違い: IDだけでなく、classや属性でも要素を特定できる

構文

document.querySelector('セレクタ名')

セレクタ名はCSSセレクタと同じ形式です。

ID名で取得

document.querySelector('#id名')

HTML:

<h1 id="title">見出し</h1>

JavaScript:

const title = document.querySelector('#title');  // #をつける

class名で取得

document.querySelector('.class名')

HTML:

<p class="text">段落1</p>
<p class="text">段落2</p>

JavaScript:

const text = document.querySelector('.text');  // .をつける
// 結果：最初の<p class="text">だけが取得される

重要: 複数ある場合は、最初の1つだけが取得される

属性で取得

属性名 = “値” の形で要素を指定した場合、以下の形式で取得できます：

document.querySelector('[属性名="値"]')

HTML:

<input type="text" placeholder="名前">
<input type="email" placeholder="メール">

JavaScript:

const emailInput = document.querySelector('[type="email"]');

注意点:

  • シングルクォーテーションとダブルクォーテーションの付け間違えに注意
  • IDやclassとは異なり、[ ] で囲む

getElementByIdとquerySelectorの違い

疑問：何が違うのか？

どちらも「要素を取得する」ことは同じですが、使い分けがあります。

違い一覧

項目getElementByIdquerySelector
取得方法IDのみID、class、属性など
記述getElementById('id名')querySelector('#id名')
ID取得時# 不要# 必要
class取得できないできる
速度速いやや遅い

使い分けのポイント

getElementById を使う場合

IDで要素を取得するとき

// シンプルで分かりやすい
const title = document.getElementById('title');

メリット:

  • 記述がシンプル
  • 処理が速い
  • IDが明確

querySelector を使う場合

classや属性で要素を取得するとき

// classで取得
const text = document.querySelector('.text');

// 属性で取得
const emailInput = document.querySelector('[type="email"]');

メリット:

  • 柔軟性が高い
  • CSSセレクタと同じ書き方
  • 複雑な条件でも取得できる

実際の使い分け（実用例）

// ID取得：getElementById（シンプル）
const counter = document.getElementById('counter');

// class取得：querySelector（これしか方法がない）
const button = document.querySelector('.btn-primary');

// 複雑な条件：querySelector
const firstListItem = document.querySelector('ul > li:first-child');

どちらを使うべきか

原則:

  • IDで取得する場合: getElementById を使う（シンプル）
  • class、属性、複雑な条件: querySelector を使う

実務では:

  • 最近は querySelector を統一して使うことも多い
  • どちらを使っても問題ない

初心者の場合:

  • まずは getElementById から慣れる
  • 慣れたら querySelector も使ってみる

クリックカウンターで使う場面

Week 2で作るクリックカウンターでは、DOMを以下のように使います：

<p id="count">0</p>
<button id="incrementBtn">クリック</button>
<button id="resetBtn">リセット</button>

// 要素を取得
const countDisplay = document.getElementById('count');
const incrementBtn = document.getElementById('incrementBtn');
const resetBtn = document.getElementById('resetBtn');

// カウントを更新
let count = 0;

incrementBtn.addEventListener('click', () => {
  count++;
  countDisplay.textContent = count;  // DOMを変更
});

DOMを変更すると、Webページに即座に反映されるというのがポイントです。

今日の学びのポイント

  • DOM: Document Object Model（Webページをツリー構造で表現）
  • getElementById('id名'): IDで要素を取得
  • querySelector('セレクタ名'): ID、class、属性で要素を取得
  • 違い:
    • getElementById: シンプル、速い（IDのみ）
    • querySelector: 柔軟、CSSセレクタが使える
  • DOMを変更すると、Webページに即座に反映される

DOMを理解することで、JavaScriptでWebページを自由に操作できるようになります。

コメント