Web開発

Web開発においてDOMは欠かせない技術、今すぐ学ぼう

Web開発において欠かせない技術、DOM。この記事では、DOMの概要から使い方までを詳しく解説します。さらに最近のトレンドである仮想DOMとの違いも解説します。今すぐ学んで、Web開発スキルを向上させましょう！

DOM (Document Object Model) とは

Document Object Model (DOM)は、Webブラウザ上のHTMLやXML文書を構成する要素、属性、テキストなどをオブジェクトとして表現し、それらを操作するためのAPIです。DOMは、JavaScriptなどのスクリプト言語を使用して、HTMLやXML文書の内容を動的に更新したり、イベントを処理したりすることができます。

DOMは、W3Cによって標準化されており、ブラウザによって実装が異なることがあります。しかし、主要なブラウザはほぼ同じように実装しているため、JavaScriptなどでDOMを操作する場合は、ほとんどの場合においてブラウザ間の差異を意識する必要はありません。

DOMの歴史

DOMの歴史は、1990年代にさかのぼります。当時、HTMLがWeb開発の主要な技術であり、ブラウザはHTMLをレンダリングし、表示するために使用されていました。しかし、HTMLはプログラミングには適していなかったため、Web開発者はHTMLを操作するために、ブラウザの内部構造をハックする必要がありました。

この問題を解決するため、W3C（World Wide Web Consortium）は、HTMLやXMLドキュメントの構造を標準化し、プログラミングインターフェイスとして提供する技術を開発しました。それがDOMです。

最初のDOM仕様は1998年に公開され、その後、HTML5やXMLなどの新しい技術に対応しながら改良されてきました。現在、DOMは、HTMLやXMLドキュメントの構造を標準化し、ブラウザや他のアプリケーションで使用できるようにするために広く使用されています。

DOMの仕組み

DOMは、HTMLやXML文書の構造を階層構造として表現します。各要素は、子要素、属性、テキストなどを持ち、親要素や兄弟要素との関係を持ちます。これにより、JavaScriptなどでHTMLやXML文書を操作する際に、要素を特定したり、要素の階層関係を考慮したりすることができます。

DOMの仕組みは、HTMLやXMLドキュメントを構造化したツリー構造であるノードツリーに基づいています。各ノードは、要素や属性、テキストなどを表し、親子関係によって構成されます。

JavaScriptからDOMを操作するには、各ノードにアクセスするためのAPIを使用します。例えば、 document.getElementById() メソッドを使用して、IDが指定された要素を取得することができます。

また、DOM APIには、要素を検索するためのメソッドも用意されており、 document.querySelector() や document.querySelectorAll() などを使用することで、CSSのセレクターに基づいて要素を取得することができます。

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

このHTMLをDOMとして表現すると、次のようになります:

- Document
  - html
    - head
      - title (My Page)
    - body
      - p (Hello, World!)

このように、各HTML要素がDOM上ではオブジェクトとして表現され、JavaScriptからそれらを操作することができます。

DOMの要素の所得

素れでは、DOM上の要素を取得するにはどのようにすればよいでしょうか？

DOM上の要素を取得するには、JavaScriptのAPIのうち、getElementById、getElementsByTagName、getElementsByClassNameなどが使用できます。また、querySelectorやquerySelectorAllも使用可能で、CSSセレクタを使用して要素を選択することができます。

次のように実装します

HTML:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p id="my-paragraph">Hello, World!</p>
    <ul>
      <li class="list-item">Item 1</li>
      <li class="list-item">Item 2</li>
    </ul>
  </body>
</html>

JavaScript:

// IDを使って要素を取得
var myParagraph = document.getElementById("my-paragraph");
console.log(myParagraph);

// タグ名を使って要素を取得
var listItems = document.getElementsByTagName("li");
console.log(listItems);

// クラス名を使って要素を取得
var listItemsByClass = document.getElementsByClassName("list-item");
console.log(listItemsByClass);

// CSSセレクタを使って要素を取得
var firstListItem = document.querySelector("li");
console.log(firstListItem);

// CSSセレクタを使って複数の要素を取得
var allListItems = document.querySelectorAll("li");
console.log(allListItems);

上記のコードでは、HTMLに記載されている要素を取得しています。 console.log()を使って、取得した要素がどのようなものか確認しています。

注意：

getElementByIdは、要素が一つしかない場合に使用します。
getElementsByTagName,getElementsByClassNameは要素が複数ある場合に使用します。取得した要素はHTMLCollection型となります。
querySelectorは、最初に見つかった要素を取得します。
querySelectorAllは、見つかったすべての要素を取得します。取得した要素はNodeList型となります。

DOM イベントを使った処理

DOM (Document Object Model) イベントは、HTML や XML ドキュメント内の要素に対して発生するイベントを処理するために使用されます。例えば、ユーザーがフォームを送信した時、マウスがクリックされた時、ページが読み込まれた時などです。

JavaScript を使用して、イベントを処理する方法はいくつかありますが、よく使用される方法は次の2つです。

HTML 属性にイベントハンドラを指定する方法

<button onclick="alert('Hello World!')">Click me</button>

addEventListener() メソッドを使用する方法

var button = document.getElementById("myBtn");
button.addEventListener("click", function(){
    alert("Hello World!");
});

上記の方法は、イベントを処理する際に使用できるJavaScriptの方法です。

javascriptがキャッチするイベントを一覧

JavaScript では次のようなイベントをキャッチすることができます。

UI (ユーザーインターフェース) イベント

load: ページが読み込まれた時
unload: ページがアンロードされた時
resize: ウィンドウのサイズが変更された時
scroll: スクロールバーが使用された時
contextmenu: コンテキストメニューが使用された時

フォームイベント

submit: フォームが送信された時
reset: フォームがリセットされた時
change: フォームの要素の値が変更された時
focus: フォームの要素にフォーカスが当たった時
blur: フォームの要素からフォーカスが外れた時

マウスイベント

キーボードイベント

keydown: キーが押された時
keypress: キーが押されている時
keyup: キーが離された時

ドロップイベント

これらは、JavaScriptでよく使用されるイベントの一覧です。あなたのアプリケーションに応じて、それらを使用して、必要な処理を実行することができます。

よくある疑問、DOMはJavaScriptの一部か？

DOMはJavaScriptの一部ではありません。DOMは、HTMLやXMLドキュメントの構造を表すインターフェイスであり、それらのドキュメントを操作するために使用されます。 JavaScriptは、DOMを使用して、HTMLやXMLドキュメントを操作するためのプログラミング言語の1つです。

新トレンド　仮想DOM

近年、JavaScriptフレームワークの中でも特に注目を集めているのが、仮想DOMと呼ばれる技術です。

Virtual DOM の仕組み

Virtual DOM (仮想DOM)は、JavaScriptのライブラリやフレームワークで使用される技術で、DOMの操作を高速化するために使用されます。

仮想DOMは、本当のDOMと同じ構造を持ち、JavaScriptで操作可能なオブジェクトです。仮想DOMを使用することで、実際のDOMを直接操作する代わりに、仮想DOMを操作します。

操作が行われると、仮想DOMと実際のDOMを比較し、必要な変更だけを実際のDOMに適用します。これにより、必要のない部分を再描画することなく、最小限の変更だけでDOMを更新することができます。これにより、パフォーマンスの向上が見込まれ、特に大規模なアプリケーションやデータが多い場合に有効です。

仮想DOMは、ReactやVue.jsなどのJavaScriptフレームワークで使用されています。これらのフレームワークでは、仮想DOMを使用して、高速な更新を実現し、パフォーマンスを向上させています。

仮想DOMの歴史

Virtual DOM (仮想DOM)は、React JavaScript ライブラリにおいて使用される概念で、DOMの操作を高速化するための技術です。

仮想DOMは、Reactが2013年にFacebookにて提供されるようになった時から利用されています。Reactは、コンポーネントベースのアプローチを採用しており、多くの要素を扱う場合には、DOMの操作が遅くなる問題が発生します。そこで、Reactにおいては、仮想DOMを使用することで、DOMの操作を高速化し、パフォーマンスを改善しました。

仮想DOMは、本当のDOMと同じ構造を持ち、JavaScriptで操作可能なオブジェクトです。Reactは、仮想DOMと実際のDOMを比較し、必要な変更だけを実際のDOMに適用することで、高速な更新を実現しています。

仮想DOMはReactに特有の機能であり、他のライブラリやフレームワークでも使用されていますが、Reactでの使用が特に有名です

仮想DOMを使用したjavascriptフレームワークの例

React.js: Facebookによって開発され、2013年にリリースされたJavaScriptフレームワークで、最も有名な仮想DOMを使用したフレームワークの1つです。
Vue.js : 2014年にEvan Youによって開発され、近年人気が上がってきているJavaScriptフレームワークで、Reactに似たアーキテクチャを採用しています。
Angular.js : Googleによって開発され、2010年にリリースされたJavaScriptフレームワークで、仮想DOMを使用しています。

まとめ

Document Object Model (DOM)は、HTMLやXMLドキュメントの構造を表すためのAPIです。DOMは、HTMLやXMLドキュメントをツリー構造に変換し、それらの要素にアクセスしたり操作したりするためのインターフェイスを提供します。

一方、仮想DOMは、DOMを模倣した軽量なJavaScriptのオブジェクト構造です。仮想DOMは、本物のDOMと同じように操作することができますが、本物のDOMと比べると遥かに軽量で高速です。これは、本物のDOMを直接操作するよりも、仮想DOMを操作してから実際のDOMに反映することで、更新が行われる部分を細かく制御することができるためです。

ReactなどのJavaScriptライブラリやフレームワークは、仮想DOMを使用しています。仮想DOMを使用することで、インタラクティブなWebアプリケーションを高速に更新することができます。