JSでDOM操作

1 課題（力試しを兼ねて）

課題1 課題2

HTML CSS

DOM構造

取得：要素をプログラムから扱うための前処理として、
プログラムの中での「値」（オブジェクトと考えてもいい）として
当該要素を扱えるようにすること。
右上図のように DOMの要素は互いに木構造に関連を持っているので、
その根（ページの中では html要素、プログラムの中では windowオブジェクト)からその木を辿ることで要素を取得する方法もある
- が、WebページのDOM構造は複雑で、この方法だと煩雑になるので後述のメソッドによる取得が一般的に使われる
- この木構造については、開発ツール（F12）の画面で確認できる
  （確認してみて下さい）
getElement系のメソッドがいくつか用意されている
値を１つ返すメソッドと、複数の値（オブジェクトの配列として）返すメソッドがあることに注意
- 名前が getElement… のものが前者、getElements… が後者
ここでは getElementById() （前者）を紹介する
メソッド名がキャメルケースであることにも注意
- 入力の際は、エディタの支援機能を使うか、参考になるページからコピペするといい

<div id="x"> ... </div>

要素のスタイル属性

x.style.属性名

というコードで、スタイルの属性値が参照できる
- x の値は（プログラムの中では）オブジェクト
- そのオブジェクトの属性(メンバー）の１つが style
- そのstyle属性の値もまたオブジェクトで、当該DOM要素の
  CSS属性の名前：値のペアが多数収められている
なお、属性名は、CSS記述での属性名とおおむね同じだが、
ハイフンは取り除かれ、キャメルケースにした名前が使われる
- 例えば CSSの background-color は、JavaScriptでは
  backgroundColor と書く

x.style.属性名  =  新しい値

x.style.backgroundColor  =  "red" ;

イベントの関係

<BODY onClick="abc()">  ... </BODY>

function abc() {
   // ここに関数の動作を書く
}

function abc() {
   alert("動作してるよ。");
}

setInterval