【Chapter8】DOMとイベント

概要と目標 JavaScriptから、
HTMLを操作する。

HTMLの各要素にアクセスする仕組みであるDOMの操作を学習し、
文字サイズ拡大機能を作成しよう。

今回のゴール

RERUN

新しいウインドウで表示する

DOMとは JavaScriptでHTMLを操作する仕組み。

DOM（ドム）とは、Document（ドキュメント） Object（オブジェクト） Model（モデル）の略で、JavaScriptからHTMLの各要素にアクセスする仕組み。

要素を取得操作する要素を、
JavaScriptで取得。

JavaScriptからHTML要素を操作する場合は、その要素を取得する必要がある。
基本は操作する要素にid属性を指定し、document.getElementById()メソッドで取得する。

document.getElementById() ・・・ ID属性が指定されている要素を取得するメソッド

var 変数名 = document.getElementById(id名);
  要素オブジェクト

要素を取得してみよう

「chapter08」 › 「dom」フォルダ内の「index.html」をテキストエディタで開く
p要素にid属性を指定

chapter08/dom/index.html

<p id="msg">こんにちは</p>
<script src="app.js"></script>

「chapter08」 › 「dom」フォルダ内の「app.js」をテキストエディタで開く
指定したid属性をJavaScriptで取得

chapter08/dom/app.js

// 要素の取得
var p = document.getElementById('msg');

上書き保存

その他の要素の取得

要素の取得は基本的にid属性で検索するが、id属性以外でも取得できる。

主な要素の取得に用いるメソッド
メソッド	パラメータ	戻り値
`getElementsByClassName()`	class名	NodeListオブジェクト（ヒットした全要素を配列で取得）
`getElementsByTagName()`	要素名	NodeListオブジェクト（ヒットした全要素を配列で取得）
`querySelector()`	CSSセレクタ (Ex: 「`#main h2`」)	Elementオブジェクト（最初にヒットした要素のみ取得）
`querySelectorAll()`	CSSセレクタ (Ex: 「`#main .contents`」)	NodeListオブジェクト（ヒットした全要素を配列で取得）

内容の変更取得した要素の
要素内を変更する。

document.getElementById()によって取得した要素オブジェクトには、
要素を操作するための様々なプロパティやメソッドが使える。
要素内を変更するには、innerHTMLプロパティを使う。

innerHTML ・・・要素内を変更するプロパティ

要素オブジェクト.innerHTML = 変更する値;

要素の内容を変更してみよう。

「chapter08」 › 「dom」フォルダ内の「app.js」をテキストエディタで開く
取得した要素の中身を「JavaScriptで置き換えだ！」に変更

chapter08/dom/app.js

// 要素の取得
var p = document.getElementById('msg');

// 内容の変更
p.innerHTML = '<em>JavaScriptで</em>置き換えだ！';

上書き保存
ブラウザで「chapter08」 › 「dom」フォルダ内の「index.html」をブラウザで開く
要素内容が「JavaScriptで置き換えだ！」に変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

スタイルの追加 JavaScriptからCSSを追加。

要素オブジェクトにCSSを追加することもできる。
CSSはインラインスタイルとして追加される。

style ・・・ CSSを追加するプロパティ

要素オブジェクト.style.CSSのプロパティ名 = CSSの値;


プロパティ名はキャメルケースで指定する　（Ex.「font-size」 → 「fontSize」）

CSSを追加してみよう。

「chapter08」 › 「dom」フォルダ内の「app.js」をテキストエディタで開く
取得した要素にCSSを追加

chapter08/dom/app.js

// 要素の取得
var p = document.getElementById('msg');

// 内容の変更
p.innerHTML = '<em>JavaScriptで</em>置き換えだ！';

// スタイルの変更
p.style.color = '#cc0000';
p.style.fontSize = '1.5em';

上書き保存
ブラウザで「chapter08」 › 「dom」フォルダ内の「index.html」をブラウザで開く
要素の文字の色と文字のサイズが変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

classの操作要素のclassを操作すれば、
あとは、CSSでなんでもできる。

要素オブジェクトのclassを追加したり、classを削除したり、
classを自由に切り替えることが出来る。

classList ・・・ CSSを追加したり削除したりするプロパティ

// add() ・・・ クラスを追加するメソッド
要素オブジェクト.classList.add(class名);

// remove() ・・・ クラスを削除するメソッド
要素オブジェクト.classList.remove(class名);

// toggle() ・・・ クラスを自動で切り替えるメソッド（ なければ追加 あれば削除 ）
要素オブジェクト.classList.toggle(class名);

className ・・・ CSSを一括で設定したり取得したりするプロパティ

要素オブジェクト.className = class名;

classを操作してみよう。

「chapter08」 › 「dom」フォルダ内の「app.js」をテキストエディタで開く
取得した要素にclassを追加

chapter08/dom/app.js

// 要素の取得
var p = document.getElementById('msg');

// 内容の変更
p.innerHTML = '<em>JavaScriptで</em>置き換えだ！';

// スタイルの変更
p.style.color = '#cc0000';
p.style.fontSize = '1.5em';

// classの操作
p.classList.add('theme-dark');

上書き保存
ブラウザで「chapter08」 › 「dom」フォルダ内の「index.html」をブラウザで開く
ブラウザの「要素の検証」でclassが追加されていることを確認
「chapter08」 › 「dom」フォルダ内の「style.css」をテキストエディタで開く
追加したclassのスタイルを記述

chapter08/dom/style.css

.theme-dark {
  background-color: #333;
  text-align: center;
  padding: 1em;
}

上書き保存
ブラウザで「chapter08」 › 「dom」フォルダ内の「index.html」をブラウザで開く
スタイルが変更されたことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

イベントユーザーが操作した時、何かする。

要素オブジェクトにイベントを設定すれば、クリックした時や、マウスを乗せた時など、
ユーザーの操作に応じて処理を発生させることが出来る。

addEventListener() ・・・要素にイベントを設定するメソッド

要素オブジェクト.addEventListener(イベント名, function () {
  // イベントが発生した時の処理
});

マウス操作の主なイベント
イベント	発生条件
`click`	要素をクリックした時
`dblclick`	要素をダブルクリックした時
`mouseover`	マウスポインターが要素の上に乗った時
`mouseout`	マウスポインターが要素の上から離れた時
`mousemove`	マウスポインターが要素の上で動いた時

キーボード操作の主なイベント
イベント	発生条件
`keypress`	キーを押している間
`keydown`	キーを押した時
`keyup`	キーを離した時

フォーム操作の主なイベント
イベント	発生条件
`select`	テキストフィールドで文字が選択された時
`change`	コントロール部品の内容が変更した時
`focus`	コントロール部品にフォーカスが当たった時
`blur`	コントロール部品からフォーカスが外れた時
`submit`	送信ボタンが押された時
`reset`	リセットボタンが押された時

その他の主なイベント
イベント	発生条件
`load`	ページが読み込まれた時
`scroll`	スクロールされた時
`resize`	サイズが変更された時
`blur`	コントロール部品からフォーカスが外れた時

イベントを設定してみよう。

「chapter08」 › 「event」フォルダ内の「index.html」をテキストエディタで開く
button要素を追加

chapter08/event/index.html

<p id="msg">こんにちは</p>
<button id="btn">クリックしてね</button>
<script src="app.js"></script>

上書き保存
「chapter08」 › 「event」フォルダ内の「app.js」をテキストエディタで開く
要素を取得し、クリックイベントを設定する

chapter08/event/app.js

// 要素の取得
var p = document.getElementById('msg');
var button = document.getElementById('btn');

// イベントの設定
button.addEventListener('click', function () {
  // #btnをクリックした時
  p.classList.toggle('is-active');
});

上書き保存
ブラウザで「chapter08」 › 「event」フォルダ内の「index.html」をブラウザで開く
ブラウザの「要素の検証」でボタンをクリックする度、classが追加されたり、削除されたりしていることを確認
「chapter08」 › 「event」フォルダ内の「style.css」をテキストエディタで開く
追加したclassのスタイルを記述

chapter08/event/style.css

.is-active {
  font-size: 1.5em;
  font-weight: bold;
  color: #cc0000;
}

上書き保存
ブラウザで「chapter08」 › 「event」フォルダ内の「index.html」をブラウザで開く
スタイルが変更されたことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題今回の理解度をチェック。

「chapter08」 › 「training」フォルダ内の「index.html」を開き、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

chapter08」 › 「training」フォルダ内に新規ファイルを作成して下さい。
- ファイル名： app.js
上記で作成したJSファイルを、「training」フォルダ内にある「index.html」から参照して下さい。
完成例を参考文字サイズ変更機能を作成して下さい。
（必要に応じてCSSファイルを作成してもOK）
- 文字サイズ：任意
【おまけ】文字サイズを変更する要素に以下のCSSを指定するとヌルヌル動く
- 「transition: all 0.3s ease-in-out;」
  （IE10以降のみ有効）

解答例

chapter08/training/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題8</title>
  <link rel="stylesheet" href="style.css">
</head>
<body id="top">
  <h1>文字サイズ変更機能</h1>
  <ul>
    <li><button id="small">小</button></li>
    <li><button id="medium">中</button></li>
    <li><button id="large">大</button></li>
  </ul>

  <p>これはダミーテキスト。これはダミーテキスト。</p>

  <h2>これはダミーの見出し</h2>
  <p>これはダミーテキスト。これはダミーテキスト。</p>

  <h2>これはダミーの見出し</h2>
  <p>これはダミーテキスト。これはダミーテキスト。</p>

  <script src="app.js"></script>
</body>
</html>

chapter08/training/app.js

// 要素の取得
var body = document.getElementById('top');
var btnSmall = document.getElementById('small');
var btnMedium = document.getElementById('medium');
var btnLarge = document.getElementById('large');

// イベントの設定
btnSmall.addEventListener('click', function () {
  body.className = 'small';
});

btnMedium.addEventListener('click', function () {
  body.className = 'medium';
});

btnLarge.addEventListener('click', function () {
  body.className = 'large';
});

chapter08/training/style.css

body {
  transition: all .3s ease-in-out;
}

.small {
  font-size: .7em;
}

.medium {
  font-size: 1em;
}

.large {
  font-size: 1.5em;
}

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ DOM操作はちょっとおもしろい。

JavaScriptからHTMLの各要素を操作する仕組みをDOMという。

要素を操作するには、document.getElementById()などで取得する
要素オブジェクトには、便利なプロパティやメソッドが使える
イベントは、addEventListener()で指定

Chapter08 DOMとイベント

要素を取得してみよう

要素の内容を変更してみよう。

CSSを追加してみよう。

classを操作してみよう。

イベントを設定してみよう。