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>
