Webページを形作っているのは、基本的にはhtmlのタグです。
そしてタグにclass属性を加えたり、id属性を加えたりして種類が同じタグを個別のものとして取り扱い、cssを利用して色を付けたり、背景を付けたりします。
さらにはjavascriptを活用して、それを動かしたり、内容を変更したりすることもあります。
HTMLやCSSについてはある程度学んでいることを前提に考えていますので、
たとえば
「 ＜div＞～＜/div＞ 」や、
「＜img src="”****.jpg”" /＞」
などのタグや、classやidなどの属性については たくさんのタグについては理解しているという前提でここから記していきます。 簡単なHTMLページを見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DOMのサンプル</title>
</head>
<body>
<h1 id="title">タイトル</h1>
<p class="sample">
本文はここに入ります。<br>
<span class="red">赤い文字</span>
</p>
<p class="sample">
二つ目の段落です。
</p>
<p id="sanban">
三番目の段落です。
</p>
</body>
</html>
当たり前ですが、いくつかのマークアップ要素（タグ）や文字（テキスト）が含まれています。
htmlタグの中に、headタグとbodyタグがあり、それぞれまたその下にいろんなタグや属性が存在しています。
このそれぞれの要素を一つ一つの「オブジェクト」と考え、HTML文書はこれらのオブジェクトが階層的に組み合わされているものという考えが生まれました。
これをDOM(Document Object Model)と呼びます。そして、それぞれのオブジェクトのことをノード（要素）と呼びます。
ノードには、
- pタグやdivタグなどのタグである「要素ノード」
- タグの始まりと終わりの間で記述されている文字（テキスト）である「テキストノード」
- 要素の中の属性となる属性モード
の３つの分かれています。上のHTMLページをDOMの階層構造で記すと以下のようになります。（実際にはwindowオブジェクトもありますが、ここは省略）
このような階層構造になります。（途中から省略しています）
実際には、これにスペースだったり改行文字だったりという「空白ノード」というのがあります。（今回それは無視しています）
このDOMでは、階層構造に分類していますので、ファイルのディレクトリ構造のように、階層が上のものが親、更に上のものが祖先、下のものが子供、更に下のものが子孫、階層が同じものが兄弟という関係があります。
たとえばbodyオブジェクト（bodyタグ）の親はhtmlオブジェクトですし、子供はh1と3つのpがあります。
h1と3つのpはそれぞれが兄弟関係（親が同じ）になります。
javascriptは、画面上の様々な要素（オブジェクト・ノード）にいろんな変化を加えるスクリプトです。
そのため、DOMという概念をしっかりと理解しておくと、あとあとすごくわかりいいですし、CSSを記述する際にもDOMの概念がないとなかなか思ったデザインが出来ません。
ただ、しっかりとhtmlソースをタブなどで改装表示させ、上の表のような階層構造であることをちゃんと理解すれば、それほど難しいものではありません。
ただ、このDOMの要素をjavascriptで処理するのは、実は難解です。
例として、
＜h1 id=”title”＞
タイトル
＜/h1＞
というタグがあります。h1オブジェクトで、id要素たtitle担っています。
こちらの文字色や背景色をcssで設定しようと思った場合、
#title {
設定
}
もしくは
h1#title {
設定
}
で設定を行うことができます。
javascriptも同じような表記の方法で記述してくれたら、CSSの文法の理解からすんなりと深く理解することができるのですが、そうは問屋が卸しません。
先ほどの<h1 id=”title”>の要素（ここでいえばタイトルという文字）をjavascriptで取得しようとすれば
var mytitle=document.getElementById("title");
のような形で取得する必要があります。（これは実際にはjavascriptの部分では学習していません。）
これらのメソッドは非常にとっつきにくいのです。
そのため、CSSみたいな表記でかんたんにjavascriptが作成できたらなー。。。という願いがどんどんつよくなり、
jQueryというライブラリが生まれてきたのです。
このDOMの表記手法については、またjQueryの簡単な説明の後に処理をしたいと思います。
表記方法は、CSSの部分でも役立ちますので、つまらない部分はありますがしっかりと記述していきます。
