🐢

DOMってなに？

2023/07/02に公開

dom

tech

はじめに

今日は以前HTMLについて復習した時などいろいろな場面で出てきたDOMについて
もっと知りたいと思ったので、調べてみました。

DOMとは?

Document Object Modelの略　「ドキュメントを物として扱うモデル」
HTMLやXMLの各要素をプログラムから操作するための標準的な方法、またはAPIを提供
ウェブ上で最も使用されているAPIのひとつ
DOMは文書を理論的なツリーで表現する
JavaScriptでHTMLの要素を操作するための仕組み

APIとは

Application Programming Interfaceの略
あるアプリケーションが他のソフトウェアなどの外部とやりとりをするために備えている機能や規則の集まりのこと

公式ドキュメント

DOMが何をするの?

DOMは、HTML文書をプログラムが利用できるように構造化する役割を持っています。
通訳者が2つの異なる言語間でコミュニケーションを可能にするようなイメージ！

DOMはプログラミング言語ではないですが、
DOMがなければJavaScriptを使ってWebページの内容を動的に変更することができません。

HTMLがページの構造と内容を定義し、
CSSがスタイルを定義するのに対し、
JavaScriptはWebページに対する動的な振る舞い（例えばユーザーのクリックや入力に反応する等）を定義します。

しかし、JavaScriptが直接HTMLを操作することはできません。
HTMLとJavaScriptは全く別の言語であり、それぞれ異なる目的と構造を持っているからです。

ここでDOMが登場！

DOMは、HTMLとJavaScriptの間の「通訳者」のような役割を果たします。

DOMにより、HTML文書がオブジェクト構造（つまり「ツリー」）に変換され、
JavaScriptはそのツリーの各ノード（HTMLの各要素）にアクセスして操作を行うことで、
Webページの見た目を変更することができます。

HTML文書がDOMによって変換されると、、

HTMLドキュメント全体は一つの大きなオブジェクトになります。
その中の各要素　「ノード」　（例えば <title>, <body>, <h1>, <p> 等）は、
そのオブジェクトの　「プロパティ」　または　「子オブジェクト」　として表現されます。

DOMがなければ、JavaScriptはHTMLの要素を見つけたり、
その内容を変更したり、新たな要素を追加したりする方法がありません。

DOMツリー

DOMツリーとは、HTML文書を視覚的に表現したものです。

DOMツリーの各要素（ノード）はHTMLの各タグや属性に対応しており、
親子関係や兄弟関係を持つことでHTMLの構造を形成します。

例えば以下のようなコードがあったとすると

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>Hello, world!</p>
  </body>
</html>

以下のDOMツリーに対応します。

└── html 
     ├── head 
     │    └── title 
     │          └── #text: タイトル
     └── body 
          ├── h1 
          │    └── #text: 見出し
          └─── p
               └── #text: 段落

<html>ノードは、このDOMツリーのルート（根元）ノード
<html>ノードの子ノードとして<head>ノードと<body>ノードが存在
<head>ノードの子ノードとして<title>ノードが存在し、<title>ノードの子ノードとして"My Page"というテキストノードが存在
同様に、<body>ノードの子ノードとして<h1>ノードと<p>ノードが存在し、それぞれの子ノードとして"Welcome to My Page"と"Hello, world!"というテキストノードが存在

検証ツールで表示されるHTML構造は、
実際にはブラウザによって解析・構築されたDOMツリーの視覚的な表現で、
「DOMツリーの現在の状態」を表しているらしいです👀

JavaScriptを使用してDOMを動的に操作（要素の追加、削除、変更など）すると、
それらの変更も開発者ツールの「Elements」タブで即時に反映される！

ノード

DOMでは、HTMLドキュメントの各部分（要素、属性、テキストなど）は　「ノード」　という単位で表現します。
ノードはツリー状の構造を形成し、それぞれのノードは他のノードと親子または兄弟の関係を持つことがあります。

ノードの種類	説明
要素ノード	HTMLタグに対応するノード。例： <body>, <h1>, <p> など
テキストノード	HTMLタグ内のテキストを表すノード。例： <h1>Hello, World!</h1> の中の "Hello, World!"
属性ノード	HTML要素の属性を表すノード。例： <img src="image.jpg"> の src 属性
ドキュメントノード	DOMツリー全体を表すノード。すべての他のノードのルート（根元）

JavaScriptを使ってDOMを操作するときには、
これらのノードを選択、追加、変更、または削除することでHTML文書を動的に変更できます。

DOMを直接操作することはよくないことなの？

DOMを直接操作すると、特に大規模なWebアプリケーションでパフォーマンスの問題や、
コードの可読性、保守性の問題が発生する可能性があります。

現代のフロントエンド開発では、ReactやVue.jsなどのライブラリ/フレームワークを用いて間接的にDOMを操作することが一般的のようです！
仮想DOM（Virtual DOM）と呼ばれる概念を使用して、必要な時にのみ最小限のDOM操作を行い、パフォーマンスを向上させているらしい👀

さいごに

まだまだ浅い部分しか触れられていないので、
DOM操作方法など、さらに知識を深めていきたいです。

明日からまた気持ち切り替えて頑張ります！楽しもう🥺