반응형
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선택자를 이용해서 요소를 제어 할 수 있다.
오늘의 포스팅은 여기까지입니다.
끝까지 읽어주셔서 감사합니다.
300x250
'IT > Javascript' 카테고리의 다른 글
자바스크립트(Javascript) 간단한 모달(Modal)창 레이어 팝업 만들기 (0) | 2024.04.04 |
---|---|
자바스크립트(javascript) 변수란 무엇인가? var let const (0) | 2024.04.03 |
자바스크립트(javascript) 팝업창 띄우기 window.open() (2) | 2024.03.23 |