div.or.kr이 ofcourse 로 이전 될 예정입니다.
새로운 강의로 보기
document.querySelector

개요

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

셀렉터는 CSS에서 사용하는 태그 셀렉터 ("#아이디" , ".클래스이름", "태그이름", "태그이름 하위태그이름" 등 ) 을 사용한다.
이때, 클래스이름이나 태그이름으로 불러와도 배열이 아닌, 맨 앞 객체 하나만 불러오게 된다.

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

사용법

var container = document.querySelector("#container");
var box = document.querySelector(".box"); //배열이 아님
var body = document.querySelector("body"); //배열이 아님

예제

box라는 클래스 이름을 가진 박스가 3개있다. 버튼을 눌렀을때, 맨 앞에 있는 버튼의 색상만 변경되는 예제이다.

<html>
<head>
	<script type="text/javascript">
		function changeColor(){
			var box = document.querySelector(".box");
			box.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