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

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

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

JavaScript

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>