DOMの基本2

JavaScript

＜HTMLファイル＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8" />
<title>Helloを表示</title>
<script type="text/javascript" src="hellow.js" charset="utf-8"></script>
</head>
<body>
<div id="div1">
	<span id="span1">span1</span>
	<span id="span2">span2</span>
</div>
<div id="div2">
	<span id="span3">span3</span>
	<span id="span4">span4</span>
</div>
<div class="testA">
	<span class="testB">span3</span>
	<span id="span4">span4</span>
</div>
<div class="testA">
	<span class="testB">span3</span>
	<span id="span5">span4</span>
</div>
</body>
</html>

＜JSファイル＞

//DOMはHTMLやCSSのデータを取得、操作する仕組み
window.onload = function(){
	//id名がdiv1の要素を取得する
	var div1 = document.getElementById('div1');
	
	//取得した要素の背景を緑にする
	div1.style.backgroundColor = '#00FF00';
	
	//要素の内容を文字列で取得
	console.log(div1.innerHTML);	

	//※elems。『s』に注意
	var elems2 = document.getElementsByTagName('div');
	
	//配列で取得される
	console.log(elems2);
	console.log(elems2[0]);
	
	//「*」でも可能。全てのタグが格納される
	var elems3 = document.getElementsByTagName('*');
	console.log(elems3);
	
	//IE8以下では対応していない
 	var elems4 = document.getElementsByClassName("testA");
	console.log(elems4);	
	//要素番号を指定する。要素番号を省略した場合はエラーになる。
           全てにかけたい時はfor文で！
	elems4[0].style.backgroundColor = '#FFFF00';
	
 	var elems5 = document.getElementsByClassName("testB");
	console.log(elems5);	
	//下の書き方だとエラーが発生。
	//elems5[0].style.font = 'bold';
	
	//合わせてフォントも指定しなくてはならないみたいです。
	elems5[0].style.font = 'bold large "ＭＳ ゴシック"'; 
}

＜Firefoxのコンソール画面＞

document.getElementsByTagNameが配列で取得されているのが確認できる。

＜Firefoxの結果＞

document.getElementsByClassNameが配列で取得されているのが確認できる。

＜IE8での結果＞

IE8の画面で確認したところdocument.getElementsByClassNameの内容が反映されていないのがわかる。