Zenn
🔖

DOMとは?!

2023/03/31に公開
JavaScript
React
JavaScript
dom
tech

DOMって？？

  • Document Object Modelの略称。
  • "DOMインターフェース"や"DOM API"とも呼ばれる。
  • Webページの構造やコンテンツを表現するためのプログラミングインターフェイスであり、
    JavaScriptなどのプログラムからWebページを動的に変更したり操作したりするために使用される。
    = HTMLやXMLの文書を、プログラムから操作するための仕組み(APIの一種)
  • JavaScriptからWebページの要素や属性、テキストなどをアクセスするためのルールや手順を提供している。

??????...???..?

...まだまだ初学者の私は、これではわからない！！！！

もっっと簡単に、わかりやすくDOMを説明すると？！

私なりに、簡単に書くと....！！！！
JavaScriptからHTMLへの入出力はこのDOMというAPIを通して行われている。
なぜかというと、JavaScriptのソースコードでは　直接HTMLを扱うことができないから、
この変換機能としてDOMが存在することによって扱えるようにしている。

と、いうことはもっと簡略化して要約して書くと以下のようになる！！！！！！

HTMLで書かれたコードを、Javascriptのコード上で扱えるように変換しているのがDOM!!!!
DOMは通訳者！！！！！

HTMLをJSに変換...？？？どういうこと？？

HTMLで書かれたWebページを、JavaScriptのコード上で扱えるようにするためには、
DOM APIを使用してHTMLの情報を変換する必要がある。
= DOM APIを使用することで、Webページの構造やコンテンツをJavaScriptで操作可能なオブジェクトとして表現し、JavaScriptコードに渡すことができる。

ここの部分の意味は、わかったよね？！

じゃあ、どんな感じに？！と、イメージのついていない私は思いました。

ex.

Webページ上のある要素のテキストを書き換える場合、まずその要素をDOM APIで取得し、そのオブジェクトのプロパティを操作することで、テキストを変更します。

具体的には、以下のようなJavaScriptコードを書くことができます。

// HTMLの<p>要素を取得する
const paragraph = document.querySelector('p');

// <p>要素のテキストを書き換える
paragraph.textContent = '新しいテキスト';

このような具合で、
HTMLの情報をJavaScriptコードに渡し、Webページの動的な変更や操作を実現することができるようになる！！

そもそもHTMLとJSはどんな関係性？！

  • 先に各言語の役割をみよう。

【HTML（HyperText Markup Language）:】
Webページの構造やコンテンツを記述するマークアップ言語であり、Webページの基本的な構造を定義する。
Ex. 見出しや段落、リンク、画像などの要素(これらの要素を組み合わせてWebページの構造を作成)

【JavaScript】
Webページに動的な機能を追加するためのスクリプト言語.
Webページの要素を動的に変更することができますが、直接HTMLを変更することはできません.

  • 役割を理解すると関係性がわかる。

HTMLはマークアップ言語であって、JavaScriptは、Webページに動的な機能を追加するためのスクリプト言語。。
=> HTMLとJavaScriptは、Webページを作成する上で密接に関連し、Webページの見た目や機能を実現するために併用されるもの。
HTMLがあって、その構造をもとにJSで動的なUIを作成する。

ここまで理解したらDOMって何？の最初の文が理解できる気が、します。

しかし、まだ一つだけわからない言葉が。

インターフェイスって,何?!?!?!?

二つの異なるシステムや物の間で情報をやり取りするための手段や方法を示す、
共通の境界線や枠組みのことを指す。
= 異なるもの同士が接続されるための共通の規格や仕組みのことを指す！！！

(ここはまた詳しく勉強の必要がありそうです。)

でもここまでくると、DOMがわかりました。
JavaScriptのソースコードでは　直接HTMLを扱うことができないから、
この変換機能としてDOMが存在している。

DOMは、JavaScriptとHTMLの通訳者！！！！

では、また勉強しながら知識深めていこうと思います。

Discussion