DOM4

JavaScript

クロスブラウザに対応するClassの取得方法

＜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>
</body>
</html>


＜JS＞

window.onload = function(){
/*===================================================
　全要素を取得し取得したものをチェック。
===================================================*/
function getByClassName(className){
	var element;
	var result=[];
	var elements = document.getElementsByTagName('*');

	//指定したclass名だったらresultに追加
	for(var i=0, len = elements.length; i< len; i++){
		element = elements[i];
				 
			if(element.className === className){
				result.push(element);
			}
		}
		return result;	
}
/*===================================================
　色を変える変数
===================================================*/
function changeColor(elems){
	for(var i=0, len = elems.length; i< len; i++){
		elems[i].style.color="#ff00ff";
	}
}

var elems = getByClassName('testA');
console.log(elems);
changeColor(elems);
		  
}