document.querySelectorAll

개요

태그의 아이디, 클래스, 이름 등으로 태그 객체를 반환하는 메서드로 jQuery의 $("셀렉터") 와 비슷하다.

셀렉터는 CSS에서 사용하는 태그 셀렉터 ("#아이디" , ".클래스이름", "태그이름", "태그이름 하위태그이름" 등 ) 을 사용한다.

document.querySelector와 다르게 여러 개의 태그 객체를 담는 배열을 반환한다. (아이디로 불러왔을 경우에도 배열 반환)

해당 메서드는 Internet Explorer 8, FireFox 3.5 이상의 브라우저에서 지원됩니다.

사용법

var containerArr = document.querySelectorAll("#container"); //배열
var boxArr = document.querySelectorAll(".box"); //배열
var divArr = document.querySelectorAll("div"); //배열

예제

<html>
<head>
	<script type="text/javascript">
		function changeColor(){
			var box = document.querySelectorAll(".box");
			var boxCount = box.length;
			for(var i=0;i<boxCount;i++){
				box[i].style.backgroundColor = "#369F36";		
			}
		}
	</script>
	<style>
		div.box{ display:inline-block; width:50px; height:50px; background-color:#FF46C5; *display:inline; *zoom:1; }
	</style>
</head>
<body>
	<div class="box">박스1</div>
	<div class="box">박스2</div>
	<div class="box">박스3</div>
	<button onClick="changeColor()">색상 바꾸기</button>
</body>
</html>
출력 결과:
박스1
박스2
박스3