DOMの基本3

JavaScript

DOMの基本２で
IE8以下では、『document.getElementsByClassName』が使えない事がわかった。
下記の『document.querySelectorAll』と『document.querySelector』も
IE7以下で対応していない。
このようなクロスブラウザに対応するためには、
DOMの基本４のような少し長いコードを書かなければならない。
＜HTML＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8" />
<title>document.querySelector</title>
<script type="text/javascript" src="hellow.js" charset="utf-8"></script>
</head>
<body>
<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">span5</span>
</div>

<p class="testA">classtestA-1</p>
<p class="testA">classtestA-2</p>

<div id="div1" style="margin-bottom:10px">
	<span id="span1">span1</span>
	<span id="span2">span2</span>
</div>
<form action="" method="post">
<table border="1">
  <tr>
    <td>どちらが好き</td>
    <td>
      <input type="radio" name="gakunen" value="１年生" />１年生</input>
      <input type="radio" name="gakunen" value="２年生" />２年生
    </td>
  </tr>
</table>
<table border="1" id="tableB">
  <tr>
    <td>好きな色</td>
    <td>
      <input type="checkbox" name="kamoku[]" value="赤" />赤
      <input type="checkbox" name="kamoku[]" value="青" />青
      <input type="checkbox" name="kamoku[]" value="黄" />黄
      <input type="checkbox" name="kamoku[]" value="紫" />紫
    </td>
  </tr>
</table>    
</form>
</body>
</html>

＜JSファイル＞

//IE7以下で対応していません
window.onload = function(){
	//id名がspan5の要素を取得する
	var idspan5 = document.querySelector('#span5');
	idspan5.innerHTML="文字を挿入";	 
	 
	//クラス名がtestAの要素を取得する
	var classtestA = document.querySelectorAll('.testA');
	classtestA[0].style.color="#ff00ff";
	
	//クラス名がtestAのp要素全て取得し、１番目の要素を確認。
	var pclasstestA = document.querySelectorAll('p.testA');
	console.log(pclasstestA[1]);
	pclasstestA[1].style.marginLeft=50+"px"; 
	
	//div要素を全て取得する
	var tableB = document.querySelector('#tableB');
	console.log(tableB);
	tableB.width="100%";
	
	//id名がdiv1の直接の子要素span全てを取得する
	//※要素は取得できてもstyleをelems4自体には付けられない。
        　//　要素番号を指定する必要がある。
	var elems4 = document.querySelectorAll('#div1 > span');
	console.log(elems4);
	elems4[0].style.fontWeight = "bold";
	//elems4[0].style.fontWeight:bold; ⇒※この書き方はできない。
	
	//input要素のtype属性値がcheckboxの要素すべて
	var divclasstestA = document.querySelectorAll('input[type=checkbox]');
	console.log(divclasstestA);
}

＜firefox ver20.0.1で見た場合＞

＜IE8で見た場合＞
???IE7以下のはずだが、何故かIE8でも効果がない。