DOMについて

DOM(Document Object Model)について、掘りげて調べてみます。

DOMはHTML、XMLのドキュメント内部のコンテンツを表現するものと言えます。

ブラウザに表示される画面のHTML構造を見てみると、ツリー構造になっていて、
それぞれがタグで書かれています。

タグについては、開始タグと終了タグで内容を囲み(一部開始/終了の意味を持たない単一のタグもあります)、
そのタグ内に内容を意味するテキストを記載します。

また、タグの中には要素を表すノード、テキスト文字を表すノードが含まれます。

このブログを表現しているHTMLタグを抜粋し、コンテンツ(内容)部分を全て簡易的に書いたものが下記のタグになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>propansystem開発ブログ</title>
</head>
<body>

<h1>ブログタイトル</h1>
<p>ブログ本文内の<b>太字</b>テキストです</p>

</body>
</html>

このHTMLの例でも、ツリー構造ととらえることが可能です。

ツリー構造は、一番上をDocumentとして、その下にhtml、そのさらに下にhead、bodyがあり、
bodyの下にh1、pタグがある。
という構造をしています。

また、それぞれのタグにはノードと呼ぶつながりがあります。
さらに、タグには上下関係があり、一つ上のツリー(のタグ)を親ノードと呼びます。
そのノートの直下にあるタグは子ノードと呼ばれます。

あるノードより下にあるノードのさらに下にあるノードは子孫ノードと呼びます。
あるノードより上にあるノードのさらに上にあるノードは祖先ノードと呼びます。

ノードについては、さらにnodeオブジェクトとしての考え方があるので、
nodeオブジェクトとプロパティ、メソッドについて、さらに深く調べてみます。

DOMについて

コメントを残す