사실 프론트 프레임워크를 다룬다면 querySelector는 거의 쓰이지 않지만,
바닐라js를 다룬다면 꽤나 자주 보게 될 querySelector에 대해 알아보자.
프론트 프레임워크를 배울거라고 querySelector 안배우겠다고 하면 안된다.
결국 프론트 프레임워크도 바닐라js 기반으로 만들어진 것이기 때문에 바닐라js를 어려워하면 프론트 프레임워크를 잘 다루지 못할 확률이 매우 높기 때문이다. (내가 그래서 지금 다시 바닐라 복습하고 있다 ㅠㅠ)
그리고 바닐라js에서 querySelector는 꽤나 자주 보이는 함수이다.
우선 이 코드에서 다양한 태그를 선택해볼 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>끝말잇기</title>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
</body>
</html>
F12를 눌러 Chrome Console에서 여러가지 실험을 해볼 것이다.
querySelector
위에서 언급했다시피 html 태그를 선택해주는 함수이다.
콘솔에 아래 코드를 입력해주자.
document.querySelector('button')
이처럼 querySelector는 html 태그에 해당하는 내용을 선택해줌을 확인할 수 있다.
만약 태그가 여러개인 경우는 가장 앞쪽에 해당하는 태그만 선택한다.
위 코드처럼 변수에 담아서 이용할 수도 있다.
참고로 변수 앞에 $는 그냥 변수명이므로 $는 붙이지 않아도 상관없다.
그냥 태그를 나타내는 변수는 앞에 $를 붙이는게 알아보기 쉬워서 붙여준 것 뿐이다.
태그가 여러개인 경우 중에서 하나만 선택하는 방법은 id, class를 이용하면 되는데, 아래에 querySelectorAll 내용과 같이 포스팅하겠다.
querySelectorAll
따라서 태그가 여러개인 경우는 querySelectorAll을 이용한다.
document.querySelectorAll('div')
div 태그들이 모두 선택됨을 확인할 수 있다.
참고로 저 NodeList(2)는 배열이 아니라 객체이다.
NodeList(2)를 클릭해보면 (key, value) 형태로 0: div, 1: div, length: 2 , ... 와 같이 여러가지 정보가 담겨있음을 확인할 수 있다. 배열과 유사하게 생긴 객체라 하여 유사객체라 부른다고 한다.
(참고로 배열도 객체이긴 하다. 그렇지만 객체는 배열이라고 할 수 없다.)
그럼 태그가 여러개인 상태에서 하나의 태그만 선택하려면 어떻게 해야할까?
아래 코드를 다시 한번 보자.
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>span 태그는 총 2개 있음을 확인할 수 있다.
우리는 이를 구분하기 위해서 span 태그에 id를 설정해줄 것이다.
위 span 태그의 id는 order로, 아래 span태그의 id는 word로 설정해주었다.
서로 다른 태그끼리 id가 같아도 에러는 뜨지 않지만,
다른 태그임을 구분해주기 위해 항상 id명은 중복되지 않게 설정해주자!
querySelectorAll('span')으로 span 태그를 찾았더니 2개의 결과가 뜨긴 하는데, 아까 div 결과와 달리 id까지 포함된 형태로 구분돼서 보여줌을 확인할 수 있다.
따라서 우린 querySelector('span#order') 와 같은 형태로 여러개의 태그 중 하나를 선택할 수 있다.
근데 어차피 모든 태그의 id명은 다 다르므로 querySelector('#order') 와 같이 id명만으로도 찾을 수 있다.
만약 여러개의 태그 중 일부 여러개만 택하고 싶다면 id가 아닌 class를 이용하자.
아래 코드에서 button 3개 중, 입력2와 입력3 버튼만 선택하고 싶다고 하자.
<button class="hello">입력</button>
<button class="btn">입력2</button>
<button class="btn">입력3</button>위와 같이 입력2와 입력3만 선택하고 싶으므로 class를 btn으로 서로 같게 명시해주고, 입력1에는 다르게 명시해주었다.
우리는 버튼 2개를 선택할 것이기 때문에 여러개의 태그를 선택하는 querySelectorAll를 이용할 것이다.
그리고 클래스를 선택할 것이기 때문에 . 을 찾을 클래스명 앞에 붙여주자.
위와 같이 document.querySelectorAll('.btn')을 입력해주면 된다.
특정 태그의 자식, 자손 태그 선택하기
자식 태그는 특정태그 바로 안에 감싸져있는 태그를 의미하고,
자손 태그는 자식의 자식, 자식의 자식의 자식... 모두를 의미하는 태그이다.
querySelector('태그1>태그2')와 같이 꺽쇠를 포함해 입력해주는 경우 태그1의 자식태그 중 태그2를 선택할 수 있고,
querySelector('태그1 태그2')와 같이 띄어쓰기로 입력해주는 경우 태그1의 자손태그 중 태그2를 선택할 수 있다.
querySelector, querySelectorAll에 대해 알아보았다.
태그 자체로만 찾지 말고 id, class도 자주 이용하자.
'JS > VanillaJS' 카테고리의 다른 글
| [VanillaJS] 바닐라js로 틱택토를 만들어보자 (0) | 2021.10.18 |
|---|---|
| [VanillaJS] 비동기 setTimeOut 함수와 연속클릭 (0) | 2021.10.14 |
| [VanillaJS] 바닐라JS의 setTimeOut을 이용한 간단한 로또추첨기 만들기 (0) | 2021.10.11 |
| [VanillaJS] addEventListener, 콜백 함수 알아보기 (0) | 2021.10.09 |
| [VanillaJS] 확인창, 경고창을 띄우는 prompt, alert, confirm 이용해보기 (0) | 2021.10.09 |