자바스크립트 선택자 querySeletor

자바스크립트에서

요소를 어떻게 선택하는지 알아봅시다.

 

---

1. querySeletor

document.querySelector("#main");

querySelector

도큐먼트. 즉, 브라우저 상의 요소.

html의 요소를 선택할 때

 

document.querySelector( )

괄호 안에 선택자를 입력하면 됩니다.

 

대소문자에 유의하여 적어주세요.

 

-

 

선택자	선택자 이름
*	전체 선택자
#	id 선택자
.	class 선택자

선택자 종류

크게 이 세 가지 정도만 알아도

선택하는 데는 문제가 없을 겁니다.

 

선택자와 함께 본다면

위의 예시는

main이라는 id값을 가진 요소를

선택한다고 볼 수 있죠.

 

-

 

---

2. 변수 선언

let main = document.querySelector("#main");

변수 선언

꼭 해야 하는 것은 아니지만

querySelector를 사용하면 코드가 길어지니

위의 예시처럼 변수에 넣어서 활용해도 좋습니다.

 

 

---

이상으로 querySeletor를 이용해

자바스크립트에서 요소를 선택하는 방법을 알아보았습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/개발 팁] - 인프런 인강 사이트 추천 (무료 강의 포함)

인프런 인강 사이트 추천 (무료 강의 포함)

[coding/JavaScript] - 내일 배움단 스파르타 코딩 클럽 후기 + ajax 시작하기

내일 배움단 스파르타 코딩 클럽 후기 + ajax 시작하기

 

그럼 이만.

총총.