자바스크립트(javascript) 요소 선택 쿼리 셀럭터querySelector 사용법 및 예제

querySelector란?

querySelector는 Javascript(자바스크립트)에서 HTML태그를 제어 할 수 있는 함수이다.

기존 Javascript(자바스크립트)에서 DOM을 선택하기 위해서는 getElementById, getElementsByClassName, getElementsByTagName 등의 메서드를 사용했다.
이러한 메서드들은 각각 아이디, 클래스, 태그 이름 등을 기준으로 요소를 선택할 수 있었다. 이 때문에 제이쿼리가 널리 보급되었다고 해도 과언이 아니다.

하지만 ES5버전 부터 querySelector가 등장했는데, querySelector를 사용하면 제이쿼리처럼 CSS선택자를 직접 사용하여 더 간단하게 요소를 선택할 수 있다.

 

제이쿼리 요소 선택 방법

2024.03.19 - [IT/JQuery] - 제이쿼리(JQuery) ID, CLASS로 선택하기(제이쿼리 셀렉터 Selector )
 

반응형

 

querySelector 사용 법

기존에 자바스크립트에서 요소를 선택 할 때는 엄청 긴코드를 써야 했었다.

const elements = document.getElementsByClassName('클래스명');
const elements = document.getElementsById('아이디명');
const elements = document.getElementsByTagName('태그이름')

querySelector로 요소를 선택하면 querySelector하나로 모든 선택자를 사용할 수 있다.

const elements = document.querySelector('.클래스명');
const elements = document.querySelector('#아이디명');
const elements = document.querySelector('태그이름')

간단하게 예제를 통하여 알아보자.
 
See the Pen Untitled by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

위 처럼 querySelector를 쓰면 제이쿼리 처럼 CSS선택자를 이용해서 요소를 제어 할 수 있다.
 
오늘의 포스팅은 여기까지입니다.
끝까지 읽어주셔서 감사합니다.