はじめに

未経験の僕が先輩エンジニアのアプリ開発に参加せてもらったのはいいが、利用している技術について全く理解ができていないので、少しでも理解するために調べてメモしていくことにしました。

今回の記事に関連する言語

・HTML
・JavaScript

DOMとは何か

HTMLやXMLの構造をプログラミング的に表現することで、提供されるAPIを通じてプログラムから自由に操作できるようにしたもの。
~~CSS オブジェクトモデル (CSSOM)というのもある事を知りましたが、こちらは使う場面でまた調べたいと思います。~~

JavaScript初心者でもすぐわかる！DOMとは何か？

DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組みだ。
ファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMである。

何度調べてもわからないDOMに決着をつける

DOM(Document Object Model) とはHTML(またはXML)ドキュメントに関するAPIで、ドキュメントをどのような構造にして、どのように操作するかを定義したものです。
このDOMが何を定義しているかというと、主にインタフェースです。

DOMを使う理由をGPTに聞いてみた

インタラクティブなウェブページの構築:

　DOMを使用することで、JavaScriptなどのプログラミング言語を介してウェブページの要素や属性を動的に変更できます。これにより、ユーザーがページ上での操作に対して迅速にフィードバックを得ることができる、よりインタラクティブなウェブページを作成できます。

動的なコンテンツ更新:

　ウェブページの一部だけを再読み込みすることなくコンテンツを更新する際に、DOMは不可欠です。Ajax（Asynchronous JavaScript and XML）を使用して、サーバーとの通信を行いながらページの特定の部分を動的に更新することが可能です。

ユーザーインターフェースの操作:

　DOMを使用することで、ユーザーがフォームやボタンなどのインターフェース要素を操作した際のイベント処理を実装できます。これにより、ユーザーの入力に対して適切な反応を示すことができます。

データの取得と表示:

　サーバーから取得したデータをDOMを介してウェブページに表示することができます。APIからのデータ取得や外部サービスとの連携を通じて、リアルタイムの情報をユーザーに提供できます。

動的なアニメーション:

　DOM要素のスタイルや位置を変更することで、アニメーションやトランジションを作成できます。これにより、ユーザーエクスペリエンスを向上させる洗練された動きや視覚効果を実現できます。

結論：
DOMはウェブ開発において、ユーザー体験の向上や動的なコンテンツの管理、データの表示など多くの側面で役に立つらしい

DOMの特徴

1.ツリー構造とも呼ばれる階層構造を取る（DOMツリー）
2. それぞれノードという言葉で説明される
3. WEBページとJavaScriptなどのプログラミング言語とを繋ぐ
<body>を頂点として、下にいくつかの<section>と、そのさらに下にいくつかの<p>で構成されている。
DOMツリー
├ <body> #親ノード
└ <section>　#基準ノード
│  ├ <p>　#子ノード
│  ├ <p>　#子ノード
│  └ <p>　#子ノード
└ <section>　#兄弟姉妹ノード
   ├ <p>　#子ノード
   ├ <p>　#子ノード
   └ <p>　#子ノード

DOMツリーの作成手順

【以下手順はこちらの記事を参照】

バイトデータ取得→HTMLドキュメント変換→トークン化→オブジェクト化→DOMツリー

最後に

JSの基礎で調べていたらDOMについては知っておくべき。と目にしたので調べました。
資料の内容が細かく書かれているおかげで少しは理解できたと思います。

参照サイト
・JavaScript初心者でもすぐわかる！DOMとは何か？
・何度調べてもわからないDOMに決着をつける
・ChatGPT - OpenAI