JavaScript - Document Object Model (DOM)

DOMとは？

Document Object Model（DOM）は、HTMLおよびXMLドキュメントのためのプログラミングインターフェースです。DOMは、ドキュメントの構造を木のような階層構造のオブジェクトとして表現し、各オブジェクトはドキュメントの一部、例えば要素、属性、またはテキストノードに対応しています。

JavaScript - HTML DOM

レゴブロックで家を建てていると想像してください。DOMは、家の構造を示す魔法の設計図のように、ブロックを manipulater し、並び替えることができる強力なツールです。これは、ウェブページとプログラミング言語の間のギャップを埋めるものでしょう。

DOMの主要概念

Node（ノード）：ドキュメントのすべての部分はノードです。要素、属性、テキストはすべて異なる種類のノードです。
木構造：DOMは、documentオブジェクトがルートにある木としてドキュメントを表現します。
トラバーサル：さまざまなメソッドとプロパティを使用してDOM木をナビゲートできます。
manipulater：DOMは、ドキュメントの構造、スタイル、コンテンツを動的に変更することができます。

以下に簡単な例を示してこれらの概念を説明します：

<!DOCTYPE html>
<html>
<head>
<title>私の最初のDOM例</title>
</head>
<body>
<h1 id="mainHeading">Welcome to DOM</h1>
<p>これはパラグラフです。</p>
</body>
</html>

このHTMLドキュメントでは、DOM木は以下のようになります：

document
└── html
├── head
│   └── title
│       └── "私の最初のDOM例"
└── body
├── h1
│   └── "Welcome to DOM"
└── p
└── "これはパラグラフです。"

HTML DOMとは？

HTML DOMは、HTMLのための標準的なオブジェクトモデルおよびプログラミングインターフェースです。以下を定義しています：

HTML要素をオブジェクトとして
すべてのHTML要素のプロパティ
すべてのHTML要素にアクセスするメソッド
すべてのHTML要素のイベント

要するに、HTML DOMはHTML要素を取得、変更、追加、削除する方法の標準です。

HTML DOMの操作

以下にHTML DOMの一般的な操作を探求します：

要素のアクセス

// IDによる要素の取得
const heading = document.getElementById('mainHeading');

// タグ名による要素の取得
const paragraphs = document.getElementsByTagName('p');

// クラス名による要素の取得
const highlights = document.getElementsByClassName('highlight');

// querySelectorを使用したより複雑な選択
const firstParagraph = document.querySelector('p');

これらの例では、HTMLドキュメントから要素を選択するさまざまな方法を使用しています。まるでウェブページの特定の部分を指差す魔法の杖のようです！

コンテンツの変更

// 要素のテキストコンテンツを変更
heading.textContent = 'Welcome to the Wonderful World of DOM!';

// 要素のHTMLコンテンツを変更
paragraphs[0].innerHTML = 'このパラグラフは<strong>修正されました</strong>！';

ここでは、要素のコンテンツを更新しています。まるでウェブページの一部を即座に消去し、書き直すようなものです！

スタイルの修正

// 要素のスタイルを変更
heading.style.color = 'blue';
heading.style.fontSize = '24px';

これらの行では、ヘッディングのスタイルを変更しています。まるでウェブ要素のファッションデザイナーのようです！

要素の作成と削除

// 新しい要素の作成
const newParagraph = document.createElement('p');
newParagraph.textContent = 'これは新規作成されたパラグラフです。';

// 新しい要素をドキュメントに追加
document.body.appendChild(newParagraph);

// 要素の削除
document.body.removeChild(paragraphs[0]);

この例では、ウェブページの建築家として新しい要素を作成し、古い要素を取り除く役割を果たしています。たった数行のコードで！

DOMが必要な理由

DOMは以下の理由で不可欠です：

動的なウェブページ：DOMがなければ、ウェブページは静的なものになります。DOMは、インタラクティブで動的なウェブ体験を作成するためのものです。
関心事の分離：DOMは、JavaScriptを使用してウェブページのコンテンツと構造を manipulater する方法を提供し、HTMLとCSSから分離します。
クロスブラウザの互換性：DOMは、異なるブラウザで動作する標準的なプログラミングインターフェースを提供し、ウェブ開発の一致性を確保します。
イベント処理：DOMは、要素にイベントリスナーを追加し、クリック、キープレス、マウスの動きなどのユーザー操作に応答する機能を提供します。
AJAXとシングルページアプリケーション：DOMは、ページを再読み込みせずにウェブページの一部を更新するための基盤であり、現代のウェブアプリケーションの基盤です。

以下に、これらの概念を多く含む例を見てみましょう：

<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<style>
.completed { text-decoration: line-through; }
</style>
</head>
<body>
<h1>私のTodoリスト</h1>
<input type="text" id="newTodo">
<button id="addTodo">Todoを追加</button>
<ul id="todoList"></ul>

<script>
const newTodoInput = document.getElementById('newTodo');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');

addTodoButton.addEventListener('click', function() {
const todoText = newTodoInput.value;
if (todoText) {
const li = document.createElement('li');
li.textContent = todoText;

li.addEventListener('click', function() {
this.classList.toggle('completed');
});

todoList.appendChild(li);
newTodoInput.value = '';
}
});
</script>
</body>
</html>

この例では、シンプルなTodoリストアプリケーションを示しています。以下の点を展示しています：

要素のアクセス
新しい要素の作成
要素のコンテンツとスタイルの修正
イベントの処理
ページの再読み込みなしでの動的な更新

DOMを使用して、ユーザーの入力に応じてリアルタイムで更新されるインタラクティブなアプリケーションを作成しました。これがDOMの力です！

一般的なDOMメソッドとプロパティ

以下は、よく使用されるDOMメソッドとプロパティの表です：

メソッド/プロパティ	説明
`getElementById()`	指定されたIDを持つ要素を返します
`getElementsByClassName()`	指定されたクラス名を持つ要素のコレクションを返します
`getElementsByTagName()`	指定されたタグ名を持つ要素のコレクションを返します
`querySelector()`	CSSセレクターに一致する最初の要素を返します
`querySelectorAll()`	CSSセレクターに一致するすべての要素を返します
`createElement()`	新しい要素を作成します
`appendChild()`	新しい子要素を追加します
`removeChild()`	子要素を削除します
`innerHTML`	要素内のHTMLコンテンツを取得または設定します
`textContent`	要素のテキストコンテンツを取得または設定します
`style`	要素のインラインスタイルを取得または設定します
`classList`	要素のクラスを manipulater します
`addEventListener()`	要素にイベントハンドラを追加します

結論として、DOMはウェブページに命を吹き込み、インタラクティブで動的な体験を作成する強力なツールです。ウェブ開発を続ける中で、DOMは魅力的で応答性のあるウェブアプリケーションを作成するための不可欠なパートナーとなるでしょう。ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:

JavaScript - varキーワード

次のチュートリアル:

JavaScript - DOMメソッド