読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

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

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

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


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

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

HTMLのツリー構造とは?

f:id:yachin29:20160419111754j:plain


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>