DOMを操作

DOMとは？ bookmark

HTMLやXMLを操作するためのAPIをDOMというそうです。要は、HTMLをJavaScriptを使って動的に、自由に書き換えることが出来ます。HTMLを動的に書き換えることは、Web2.0時代のWebサイトとしては必須です。
このページではDOMで行える基本的なことを紹介します。

HTMLを書き換えてみる bookmark

次のようなDIV要素があります。

<div id="content"></div>

タグの中には何もHTMLが入っていませんが、次のようにJavaScriptのコードを書くことで動的にHTMLが入ります。

var content = document.getElementById("content");
content.innerHTML = 'foobar';

上記スクリプトを実行することで、ブラウザ内のHTMLは次のようになります。

<div id="content">foobar</div>

document.getElementById という機能を使っています。これは、HTMLタグの中で、 id="～" で指定されたHTMLエレメントを取得するための機能です。
content という変数に<div>エレメントを代入し、innerHTMLという変数にHTMLを入れ込むことで、<div>エレメントの中身にHTMLを挿入することが出来てしまいます。

→ DOMのリファレンスはこちら

動的にスタイルを切り替えてみる bookmark

DOMを使って、動的にスタイルシートの属性を切り替えることも出来ます。
次のようなDIV要素があるとします。

<div id="content">foobar</div>

そして、次のスクリプトを実行してみます。

var content=document.getElementById("content");
content.style.backgroundColor = 'red';

すると、DIV要素の背景色が赤になります。
これはページの最初で説明した、「HTMLを書き換えてみる」の部分と同様に、document.getElementByIdによってエレメントを取得し、style.backgroundColor の値を red に設定することで背景色のスタイルシートを設定しています。

これにより、ボタンを押すと、特定部分の背景色が変化するようにできます。うまく使うことで、分かりやすいページのナビゲーション機能を作ることができるでしょう。
(例えば、フォームの入力値がうまく入力されていない状態を検出し、その部分の背景色を赤にするなど)

→ スタイル設定のリファレンスはこちら (様々なプロパティがあるので色々試すのも楽しいです)

このページで、JavaScriptの基礎は終わりです。次のページからは、JavaScriptのオブジェクト指向について説明していきます。オブジェクト指向が分からない人にもわかるよう説明していきます。

次のページ： JavaScriptでオブジェクト指向 （JavaScriptの基礎）