2022-02-19

DOM (ドキュメントオブジェクトモデル)

DOMとは

ドキュメントオブジェクトモデル（Document Object Model）、一般的にはDOMと呼ばれるものは、ウェブ開発の重要なコンポーネントです。DOMは、HTMLやXMLドキュメントのためのプログラミングインターフェースであり、ドキュメントをツリー構造で表現します。つまり、各HTMLタグはオブジェクトに変換され、それらをJavaScriptなどのスクリプト言語で操作することができます。

DOMは、ドキュメントの構造、スタイル、コンテンツを変更する能力を持つため、ウェブスクリプト言語の中心的な役割とされています。ウェブページが読み込まれると、Webブラウザは自動的にDOMを作成し、開発者がページの内容を動的に操作することができます。

DOMでは、ドキュメントはノードとオブジェクトとして表され、"DOMツリー"として知られる構造を形成しています。このツリー状の構造により、プログラミング言語はドキュメント内の各オブジェクトにアクセスして操作することができます。オブジェクトは追加、変更、削除が可能です。

JavaScriptの文脈では、ウェブページ上の要素と対話するたびに、DOMと関わっています。JavaScriptはページ内の全てのHTML要素と属性を追加、変更、削除することができます。また、ページ内の全てのCSSスタイルを変更し、ページ上の既存の全てのイベントに反応することもできます。

DOMの要素

DOMの重要な構成要素であるノード（Nodes）、要素（Elements）、属性（Attributes）について説明します。

ノード
DOMでは、全てがノードです。全体のドキュメントはドキュメントノードであり、各HTMLタグは要素ノードであり、HTML要素内のテキストはテキストノードであり、コメントもコメントノードです。
要素
要素はノードの一種であり、開始タグで定義され、テキストや他の要素、またはその両方を含むことができ、終了タグで終わります。例えば、<p>Hello, World!</p>では、<p>が開始タグであり、Hello, World!がテキストノードとして表され、</p>が終了タグです。全体の行は要素ノードを表します。
属性
属性は要素に関する追加情報を提供します。属性は常に開始タグで指定され、通常はname="value"という名前と値のペアで表されます。例えば、<a href="http://example.com">This is a link</a>では、href="http://example.com"が<a>要素ノードの属性です。

DOMのトラバース

DOMのトラバースは、JavaScriptを使用してウェブページを操作する上で基本的な要素です。トラバースには、現在のノードから上方向（親ノードへ）、下方向（子ノードへ）、横方向（兄弟ノードへ）に移動することが含まれます。

親ノード、子ノード、兄弟ノード

DOMツリー内の全てのノードには親ノードがあります（ルートノードを除く）。ノードは複数の子ノードを持つことがあり、同じ親を持つノードは兄弟ノードと呼ばれます。

parentNode: 指定されたノードの親ノードにアクセスするためのプロパティです。
childNodes: 指定されたノードの子ノードのコレクションを返すプロパティです。
nextSiblingおよびpreviousSibling: これらのプロパティは、指定されたノードの次の兄弟ノードおよび前の兄弟ノードにアクセスするために使用されます。

NodeListとHTMLCollection

getElementsByClassNameやgetElementsByTagNameなど、DOM要素を取得するためのいくつかのメソッドは、複数の要素を返します。これらの要素はNodeListまたはHTMLCollectionとして返されます。これらは配列に似たノードのコレクションですが、真の配列ではありません。ただし、forループを使用して繰り返したり、より複雑な操作のために配列に変換したりすることができます。

DOMの操作

DOMの操作には、HTML要素の内容、構造、スタイルを変更することが含まれます。

要素の作成

JavaScriptを使用して、要素を動的に作成し、ウェブページに追加することができます。これは、createElement(tagName)メソッドを使用して、tagNameパラメータで指定されたタイプの新しい要素を作成する方法や、createTextNode(data)メソッドを使用して、指定されたデータを含む新しいテキストノードを作成する方法などを通じて行われます。

要素の更新

HTML要素の内容は、要素のtextContentまたはinnerHTMLプロパティを変更することで変更することができます。また、setAttribute(name, value)メソッドを使用して要素の属性を変更することもできます。ここで、nameは属性の名前であり、valueは属性の新しい値です。

要素の削除

要素は、削除したい要素の親ノード上でremoveChild(child)メソッドを呼び出すか、要素自体で直接remove()を呼び出すことによってDOMから削除することができます。

DOMのイベント

イベントはインタラクティブなウェブアプリケーションの中心的な要素です。DOMでは、イベントは何かが起こったことを示す信号です。全てのDOMノードはイベントを生成することができ、JavaScriptはこれらのイベントに対してイベントリスナーを使用して反応することができます。

イベントの種類

ウェブページとの対話中に発生するさまざまなタイプのイベントがあります。一部の一般的な例を挙げると、

click: マウスクリックが検出されたときに発生
mouseover: カーソルが要素上に移動したときに発生
mouseout: カーソルが要素から移動したときに発生
keydown: キーが押されたときに発生
load: ページが完全に読み込まれたときに発生

イベントリスナー

イベントリスナーは、特定のイベントが発生するのを待ってから実行される関数です。JavaScriptでは、addEventListener(type, listener)メソッドを使用して要素にイベントリスナーを追加できます。

イベント伝播: バブリングとキャプチャリング

イベント伝播は、イベントがDOMツリーを伝播または移動するプロセスです。これには次の2つのフェーズがあります。

キャプチャリングフェーズ: イベントはドキュメントオブジェクトからターゲット要素に向かって下方向に移動します。
バブリングフェーズ: イベントはターゲット要素からドキュメントオブジェクトに向かって上方向にバブリングします。

addEventListener()内のuseCaptureパラメータを設定することで、リスナー関数がどのフェーズで実行されるかを制御することができます。

モダンなDOM API

JavaScriptとDOMの進化により、DOMとの相互作用において新しい、より効率的な方法が生まれました。これらのメソッドはよりシンプルで強力であり、DOM操作がスムーズになります。

QuerySelectorとQuerySelectorAll

querySelector()メソッドを使用すると、指定されたセレクタに一致する最初の要素を検索することができます。querySelectorAll()は、指定されたセレクタに一致する全ての要素を静的なNodeListとして返します。

let el = document.querySelector(".my-class"); // gets first element with "my-class" class
let els = document.querySelectorAll(".my-class"); // gets all elements with "my-class" class

FetchとPromises

Fetch APIは、古いXMLHttpRequestよりも簡単にWebリクエストを行い、レスポンスを処理するための方法を提供します。Fetch APIはプロミスに基づいており、将来の値を表すプロミスを返します。プロミスはまだ読み込まれていない値を表すものですが、最終的に読み込まれるであろう値を表します。

fetch()メソッドは、リクエストに対するレスポンスを表すResponseオブジェクトを解決するプロミスを返します。このプロミスは.then()と組み合わせて使用し、レスポンスが利用可能になったときにレスポンスを処理することができます。