DOM (ドキュメント・オブジェクト・モデル)とは

JavaScript

Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。簡単に言い換えるとhtmlの各要素、たとえば「p」とか「img」といった要素に直接アクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。

ここではDOMを通して、「オブジェクト指向」という、対象をオブジェクト（要素ノード）、つまり「もの」のように捉えてプログラミングを行う手法を覚えましょう。
1、命令するオブジェクトを選ぶ
2、メソッド（命令）をかける
3、どのタイミングで命令を実行するか

1、命令するオブジェクトを選ぶ

DOMを使う際に覚えなければいけない事が、HTMLのツリー構造とNode(ノード)と呼ばれる単位です。

HTMLのツリー構造とは？

Node(ノード)とは？

ノードとは、DOMでアクセス・変更できるブロック単位です。
HTMLタグ全てがノードで作られています。

DOMで扱うノードの種類は3種類です。

エレメントノード（HTMLタグ）
属性ノード（src や alt）
テキストノード（タグで囲まれたテキスト）

ノードの指定方法には色々ありますが、
要素のId名で指定する「document.getElementById」
要素のclass名で指定する「document.getElementsByClassName」（※IE8以下では利用できません）
指定した要素全てに命令する「document.getElementsByTagName」

2、メソッド（命令）をかける

メソッドはドットシンタックス（ドットでつなぐ文法）で記述します。

innerHTM(取得した要素の内容を変更)
style.backgroundColor(取得した要素のスタイルを変更)
image.src （取得した要素の属性を変更）
などがあります。

3、どのタイミングで命令を実行するか

window.onload（ファイルが読み込まれたタイミング）
onclick（ボタンを押したら）

記述例

<body>
<div id="box">This is box</div>
<script>
window.onload = function() {
  // id名が'box'の要素を取得する
  var box = document.getElementById('box');

  // 取得した要素の背景色を黄緑色にする
  box.style.backgroundColor = 'yellowgreen';
};
</script>
</body>