🌴

DOMって?DOMの基本。ー雰囲気理解を理解するー

2022/02/24に公開約1,300字

「DOMってよく聞くよな〜」
「なんか、あの、ツリーのやつでしょ?」
と、DOMがよく話に出るものの理解しきれていなかったので、今回まとめてみます。

同じような方も多いと思うので、参考になれば嬉しいです。

DOMって何よ?

DOMとは、JavaScriptでHTMLの要素を操作するための仕組みです。

現在よく利用されている言語のほとんどがサポートしています。

具体的にどんなんよ?

とはいえ、まだ想像はつきづらいですよね。ということで具体的に例を挙げてみます。

検証ツールで見るあれ、あれがDOMツリーです。

あれ↓。(右側)

ブラウザはDOMを使って画面を表示します。

DOMはHTMLから作られます。

DOMはAPIを持っていて、それのおかげでJavaascriptから操作ができるようになります。(詳しくは次の項目へ)

getelementbyid や onclick はその API のひとつです。

DOMは、そのAPI(Document)に加え、element(divタグなど)、text(pタグの間に入るような文字)も持っており、その箱の1つ1つを"DOMEノード"と呼びます。

なんで必要なの?

クライアントサイドJavascriptプログラミングでは、「ユーザーからなんらかの入力を受け取って、これを処理した結果をページに反映させる」という流れが一般的です。
ページに反映させる、つまり、HTMLをJavascriptから編集するということです!

この時に、文字列として編集することも可能ですが、div要素やアンカータグといった塊で操作できた方が便利です。

そこで登場するのがDOMです!✌️いえーい

構造

DOMは、ドキュメントを文書ツリーとして扱います。

例えば、下記のようなコードなら、DOMの世界ではその下のツリー構造と解釈されることのなります。

<!DOCTYPE html>
<html>
<head>
<meta charaset="UFT-8" />
<title>タイトルだよん</title>
</head>
<body>
 <p id="great">これが<span>文書ツリー</span>です。</p>
</body>
</html>

DOMでは、Document Object Modelという名前の通り、文書に含まれる要素や属性、テキストをそれぞれオブジェクトと見なし、「オブジェクトの集合(階層関係)が文書である」と考えるのです。

ちなみに、
文書を構成する要素や属性、テキストといったオブジェクトのことをノードと呼びます。DOMは、これらのノードを抽出・追加・置換・削除するための汎用的な手段を提供するAPIなのです🐥

Discussion

ログインするとコメントできます