[JavaScript] querySelector : HTML Element 가져오기

querySelector 함수를 사용하여 JavaScript에서 HTML에 있는 element에 접근해 값을 참조하거나 변경할 수 있다.

querySelector는 getElementBy* 처럼 특정 id를 제한하지 않고 CSS선택자를 사용하여 요소를 찾을 수 있다.

 

예시 )

document.querySelector("tagName"); 		// 태그명이 "tagName"인 첫번째 요소를 가져온다
document.querySelector(".className");	// 클래스명이 "className"인 첫번째 요소를 가져온다.
document.querySelector("#idName);		// 아이디가 "idName"인 첫번째 요소를 가져온다.

document.querySelector("#divName button"); 	// 아이디가 "divName"인 요소 안의 button을 가져온다.
document.querySelector("div #login");		// div 태그안의 아이디가 "login"인 요소를 가져온다.
document.querySelector(".className #idName"); 	// 클래스명이 "className"인 요소 안의 아이디가 "idName"인 요소를 가져온다.