DOMを使ってみる

ノードへのアクセス方法

getElementById()メソッドを利用してみます。
引数（カッコの中身）にはidの値を入れます。

例1：HTMLの中身を書き換える

function hoge() {
	var sampleNode=document.getElementById("idHoge");
	sampleNode.innerHTML="ぷぎゃー";
}

<p id="idHoge">ほげほげ</p>

→サンプルページを見る

・id="idHoge"のpタグのノードを取得し、変数sampleNodeに格納
・sampleNode（中身は<p id="idHoge">のノード）のhtmlを「ぷぎゃー」に変更（「ほげほげ」が「ぷぎゃー」になる）

ノードを取得するために、document.getElementById("id名")を使っています。ノードを取得して変数sampleNodeに格納します。
次に、innerHTMLプロパティを使って取得したノードのHTMLを変更しています。
sampleNode.innerHTML="変更後の内容"でノードのHTMLが書き換えられます。

例2：cssを操作する

function hoge() {
	var sampleNode=document.getElementById("idHoge");
	sampleNode.style.color="#ff0000";
}

<p id="idHoge">ほげほげ</p>

→サンプルページを見る

・id="idHoge"のpタグのノードを取得し、変数sampleNodeに格納
・sampleNode（中身は<p id="idHoge">のノード）にcolor:#ff0000;というスタイルを追加

ノード取得済の変数.style.cssのプロパティ="値"で取得したノードのCSSを変更します。

例3：画像を動かしたり、濃度を変えたりしてみる

window.onload=init; //ページの読み込みが完了したとき、initを実行する
function init() {
	document.getElementById("btnMove").onclick=startMove;
}

var n=0; //変数nの初期値0
var m=50; //変数mの初期値50
function startMove() {
	n=n+m;
	var moveNode=document.getElementById("moveImg"); 
    //変数moveNodeに、id="moveImg"のノードを代入
	moveNode.style.left=n+"px"; 
    //moveNodeのスタイルを変更→left:[n]px;
	if (n>300) { //nが300を超えたら
		n=0-m; //nを最初の場所に戻す
	}
}

var i=1; //変数iの初期値1
function fadeOut() {
	var fadeImg=document.getElementById("btnMove"); 
    //変数fadeImgに、id="btnMove"のノードを代入
	i -= 0.1; //i=i-0.1
	fadeImg.style.opacity=i; 
    //fadeImgのスタイルを変更→透明度の変更
	fadeImg.style.filter="alpha(opacity="+(i*100)+")"; 
    //IE対策
	if (i<0) {
		i=0;
	}
}
function fadeIn() {
	var fadeImg=document.getElementById("btnMove"); 
    //変数fadeImgに、id="btnMove"のノードを代入
	i += 0.1; //i=i+0.1
	fadeImg.style.opacity=i; 
    //fadeImgのスタイルを変更→透明度の変更
	fadeImg.style.filter="alpha(opacity="+(i*100)+")"; 
    //IE対策
	if (i>1) {
		i=1;
	}

}


<p id="moveImg">
<img src="img_sample_dom3.gif" alt="クリックすると動くよ！" id="btnMove" />
</p>

<input type="button" value="画像を薄くする" onclick="fadeOut();" />
<input type="button" value="画像を濃くする" onclick="fadeIn();" />

→サンプルページを見る

・window.onload=init;
ページの読み込みが完了してからinit関数が実行されます。
ページが読み込まれる前に実行してしまうと、「id="btnMove"がない！」とエラーがでてしまいます。
・画像をクリックすると右に50pxずつ移動します。300pxを超えると、画像が元の場所に戻ります。
・「画像を薄くする」ボタンをクリックするたびに、画像の濃度がちょっとずつ薄くなっていきます。
・「画像を濃くする」ボタンをクリックするたびに、画像の濃度がちょっとずつ濃くなっていきます。
・style.opacityがIE非対応なので、style.filter="alpha(opacity=**%)を使います。

DOMとは
DOMを使ってみる