document.getElementsByClassName

개요

html문서에서 해당 클래스 이름을 가진 객체(태그)를 반환한다.

사용법

var obj = document.getElementsByClassName ("enemy");

예제

enemy 라는 클래스 이름을 가지고 있는 모든 객체의 색상을 바꾸는 예시이다.

<html>
<head>
	<script type="text/javascript">
		function changeColor(){
			var enemys = document.getElementsByClassName("enemy");
			for (var i=0; i<enemys.length; i++){
				enemys[i].style.backgroundColor = "#148CFF";
			}
		}
	</script>
	<style>
		div.enemy{ display:inline-block; width:50px; height:50px; background-color:#FF46C5; *display:inline; *zoom:1; }
	</style>
</head>
<body>
	<div id="box1" class="enemy">적군1</div>
	<div id="box2" class="enemy">적군2</div>
	<div id="box3" class="enemy">적군3</div>
	<button onclick="changeColor()">색깔 바꾸기</button>
</body>
</html>
출력 결과:
적군1
적군2
적군3