10.
DOMの基本 2
DOM とは
DOMツリー構造
DOM(Document Object Model) は、簡単にいうとHTMLのオブジェクトのことです。JavaScriptは、DOMを操作できる唯一の言語で、ブラウザ操作するアプリ開発には欠かせません。DOMはNodeを起点としたツリー状の集合になっています。
Node
├── Document
└── Element
├── HTMLElement
└── SVGElement
Node
Nodeは、DOMツリーを操作するオブジェクトです。NodeにはDocument、Element、SVGElementといった種類に分類されます。
Element
Elementは、Nodeの一部でWebページ内のHTMLタグを表すオブジェクトです。Elementオブジェクトは、プロパティやメソッドを提供し、スタイル、イベントなどを設定して操作します。
Documentオブジェクトとは
DocumentオブジェクトはHTML全体を指すオブジェクトで、HTMLを構成するElementをプロパティやメソッドで操作できます。
document
//または
window.document
getElementById()
getElementById() は、idを指定してElementを取得するメソッドです。
document.getElementById('id名')
DOMの操作
ファイル構成
/
├── js/
│ └── dice.js
└── dice.html
dice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dice Roll</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<nav class="text-center p-8 bg-white">
<h2 id="title" class="text-3xl font-bold mb-4"></h2>
<div id="message"></div>
</nav>
<main class="flex mt-10 justify-center min-h-screen">
<div class="w-[150px] h-[150px] text-center p-[50px] bg-white shadow-lg rounded-lg">
<p id="result" class="text-5xl font-bold text-blue-600"></p>
</div>
</main>
<script src="js/dice.js"></script>
</body>
</html>
Element取得
getElementById() でElementを取得します。
js/dice.js
var titleElement = document.getElementById("title");
var messageElement = document.getElementById("message");
console.log(titleElement);
console.log(messageElement);
コンソールに Elementオブジェクトが表示されました。
コンソール
<h2 id="title" class="text-3xl font-bold mb-4">DICE</h2>
<div id="message" class="text-md p-3"></div>
プロパティ
プロパティとメソッド
JavaScriptをはじめとるするオブジェクト指向言語は、オブジェクトに関連付けられたプロパティやメソッドが利用できます。JSではプロパティやメソッドを利用して、DOM操作できます。
key & value
プロパティは、キーと値（key & value） で構成され、キーは文字列またはシンボル、値は任意のデータ型（数値、文字列、配列、オブジェクト、関数など）で設定します。
プロパティの種類
DOMでよく利用されるプロパティは、オブジェクトで直接アクセスできるように用意されています。
| プロパティ名 | 説明 |
|---|---|
document.body |
<body>タグに対応する要素 |
document.head |
<head>タグに対応する要素 |
document.title |
ページのタイトル |
document.URL |
現在のページのURL |
document.forms |
ページ内のすべてのフォーム（<form>タグ）をコレクションとして取得 |
document.images |
ページ内のすべての画像（<img>タグ）をコレクションとして取得 |
element.className |
要素のクラス名を取得または設定します（複数のクラスを持つ場合はスペースで区切られた文字列）。 |
element.classList |
要素のクラスのリスト（add()、remove()、toggle()メソッドを使用可能）。 |
element.id |
要素のID属性を取得または設定します。 |
element.value |
フォーム要素（<input>、<textarea>など）の値を取得または設定します。 |
element.style |
要素のインラインスタイルを操作します。 |
element.href |
リンク要素（<a>）のリンク先URLを取得または設定します。 |
element.src |
画像要素（<img>）の画像ソース（URL）を取得または設定 |
element.alt |
画像要素（<img>）の代替テキストを取得または設定 |
element.parentElement |
親要素を取得します。 |
element.children |
要素の子要素をHTMLコレクションとして取得 |
element.firstElementChild |
最初の子要素を取得 |
element.lastElementChild |
最後の子要素を取得 |
element.nextElementSibling |
同じ階層内で次の兄弟要素を取得 |
element.previousElementSibling |
同じ階層内で前の兄弟要素を取得 |
innerText
innerTextは、Elementのコンテンツを取得・更新するプロパティです。
コンテンツ設定
h2タグにテキストコンテンツ「DICE」を設定します。
js/dice.js
var titleElement = document.getElementById("title");
console.log(titleElement);
// 「DICE」を設定
titleElement.innerText = 'DICE';
ブラウザ
innerHTML
innerHTMLは、innerTextと同様の機能ですがHTMLコンテンツを取得・更新します。
js/dice.js
var messageElement = document.getElementById("message");
// HTMLコンテンツ更新
messageElement.innerHTML = '<p class="text-green-800">サイコロをふりました！</p>';
ブラウザ
innerTextはHTMLタグがそのまま表示
innerTextを利用してしまうと、HTMLタグがそのまま表示されてしまいます。
js/dice.js
var messageElement = document.getElementById("message");
// テキストコンテンツ更新
messageElement.innerText = '<p class="text-green-800">サイコロをふりました！</p>';
ブラウザ
idプロパティ
idの取得
js/dice.js
var titleElement = document.getElementById("title");
console.log(titleElement);
// IDの取得
console.log(titleElement.id);
結果
title
idの設定
idプロパティで変更することもできます。
titleElement.id = "dice-title";
classNameプロパティ
classNameプロパティは、HTMLタグのclassの取得・設定をします。
classの取得
console.log(titleElement.className);
コンソール
text-3xl font-bold mb-4
classの設定
titleElement.className = "text-red-500 text-4xl font-bold mb-4";
ブラウザ
サイコロアプリ
ロジック
ランダム整数関数
ランダムな整数を返す関数を実装します。
js/dice.js
const randomNumber = (min, max) => {
//(0 - 1 のランダム) * (max + 1 - min) + min
var number = Math.floor(Math.random() * (max + 1 - min)) + min;
return number;
}
サイコロ実行関数
サイコロを振る関数 rollDice() を定義します。
js/dice.js
const rollDice = () => {
}
「1」から「6」のランダムな整数を取得し、HTMLに表示します。
js/dice.js
const rollDice = () => {
var number = randomNumber(1, 6);
var resultElement = document.getElementById("result");
resultElement.innerHTML = number;
}
サイコロの実行
rollDice() を実行します。
js/dice.js
rollDice();
ブラウザを更新するたびに、サイコロの目が変わります。
ブラウザ
data
DOMに対してカスタムデータを追加 ・取得するには、DOMに対して data- ではじまるプロパティ名と値を設定します。
<p data-key="value"></p>
datasetプロパティの用意
| データプロパティ | プロパティ | 設定値 |
|---|---|---|
| data-number | number | サイコロの値 |
datasetプロパティ data-number は最初は空欄です。
<p id="result" data-number="" class="text-5xl font-bold text-blue-600"></p>
datasetプロパティの設定
サイコロを実行して、数字を data-numberに設定します。
const rollDice = () => {
var number = randomNumber(1, 6);
var resultElement = document.getElementById("result");
resultElement.innerHTML = number;
// データプロパティ number を設定
resultElement.dataset.number = number;
}
datasetプロパティの確認
DevToolsのElementタブで確認すると、サイコロの値が設定されています。
DevTools
ソース
js/dice.js
var titleElement = document.getElementById("title");
var messageElement = document.getElementById("message");
console.log(titleElement);
console.log(messageElement);
titleElement.innerText = 'DICE';
// id取得
console.log(titleElement.id);
titleElement.id = "dice-title";
// class取得
console.log(titleElement.className);
// class設定
titleElement.className = "text-red-500 text-4xl font-bold mb-4";
/**
* ランダムな整数
*/
const randomNumber = (min, max) => {
//(0 - 1 のランダム) * (max + 1 - min) + min
var number = Math.floor(Math.random() * (max + 1 - min)) + min;
return number;
}
/**
* サイコロを振る関数
*/
const rollDice = () => {
// 1 - 6の整数取得
var number = randomNumber(1, 6);
//サイコロの目を表示
var resultElement = document.getElementById("result");
resultElement.innerHTML = number;
messageElement.innerHTML = '<p class="text-green-800">サイコロをふりました！</p>';
// messageElement.innerText = '<p class="text-green-800">サイコロをふりました！</p>';
resultElement.dataset.number = number;
}
// サイコロの実行
rollDice();