document.querySelector('선택자')
document는 브라우저에서 제공해주는 객체여서 따로 선언을 하지 않고도 사용 가능
querySelector라는 메소드
선택자는 html태그를 선택할 수 있는 특수한 문자열
const $input = document.querySelector('input');
input태그를 선택해서 $input안에 저장한다는 의미
$붙인것은 변수명앞에 $ _ 같은것붙일 수 있음
자신만의 규칙: 태그를 변수에 넣을 때는 변수명 앞에 $를 붙인다. -> 변수만 보고도 이게 자바스크립트 값이 아니라 태그를 선택한 것이구나 라는 것을 쉽게 알 수 있다. 태그가 여러개면 $$ 두개.
태그 여러개를 선택할때 querySelectorAll
<button>입력</button>
<button>버튼2</button>
<button>버튼3</button>
<script>
const $$buttons = document.querySelectorAll('button');
console.log($$buttons);
</script>
</body>
</html>
버튼 3개를 다 선택하고 싶어서 querySelectorAll을 사용했다.
console에서 확인하면 [button, button, button] 이렇게 배열처럼 나오는데
NodeList처럼 (3) 앞에 무언가가 있으면 배열이 아니라 객체이다. 배열인척 하는 객체. 유사배열. 나중에 얘네들은 배열의 메소드나 속성을 쓸 수 없는 경우가 많아서 구별해줘야 한다.
진짜 배열은 아래에 [12,12,12] 처럼 (3)앞에 뭐가 없다.
arguments도 유사배열.
querySelector는 여러개중에 첫번째꺼만 선택하고 querySelectorAll은 다 선택함.
만약에 word 하나만 선택하고 싶다.
document.querySelector('span'); 으로 하면 그 중 첫번째인 order가 선택된다.
그래서 id가 있는 것임.
document.querySelector('#order'); //아이디가 word인 태그를 찾아라.
만약 버튼2, 버튼3만 선택하고 싶다.
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<button class="btn">버튼2</button>
<button class="btn">버튼3</button>
<script>
const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
alert(number);
const yesOrNo = confirm('맞나요?');
document.querySelectorAll('.btn');
그러면 일단 2개 이상이니까 querySelectorAll을 사용해야한다.
그래서 공통된 것은 class가 btn 이므로 document.querySelectorAll을 한 후에 ('.btn')을 추가해주면 된다.
만약 그런데 입력, 버튼3을 선택하고 싶다.
그러면 2가지 방법이 있다.
1. 클래스를 옮긴다.
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button class="btn">입력</button>
<button>버튼2</button>
<button class="btn">버튼3</button>
<script>
const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
alert(number);
const yesOrNo = confirm('맞나요?');
document.querySelectorAll('.btn');
이런식으로 선택하고 싶은 것을 같은 클래스로 만들어준다.
2. 클래스를 옮기고 싶지 않다면 할 수는 있는데 입문자에게 너무 복잡함.
=> 클래스를 하나 더 만든다.
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button class="target">입력</button>
<button class="btn">버튼2</button>
<button class="btn target">버튼3</button>
<script>
const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
alert(number);
const yesOrNo = confirm('맞나요?');
document.querySelectorAll('.target');
target이라는 클래스를 하나 더 만들어서 querySelectorAll을 이용해 target을 선택해주면 된다.
다양한 방법 중에 주력으로 쓰는 한가지 방법을 만들기.
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<script>
const $span = document.querySelector('div span');
console.log($span);const $span = document.querySelector('div span');
위 코드처럼 div 하고 한칸 띄어쓰기 후 다른 태그를 쓰는 경우도 있다. div span처럼.
태그랑 태그 사이에 공백이 있으면 자손태그를 의미한다.
그래서 위 태그는 div의 자손인 span을 찾아라 를 의미하게 된다.
자손과 자식의 차이점
자식은 바로 안에 들어있는것이 자식. div span
자손은 자식+손자+(후손)까지 포함. div span, div p(아래 코드)
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"><p></p></span></div>
<input type="text">
<button>입력</button>
<script>
const $span = document.querySelector('div p');
console.log($span);
만약 span아래에 p도 있으면 이렇게 하면 div의 자손인 p를 찾게 된다.
만약 자식만 찾고싶다.
그러면 document.querySelector('div>span'); 이렇게 하면 된다.
의미는 div의 바로 자식인 span을 찾는다는 의미.
document.querySelector('선택자 내부선택자 내부선택자 ...'); ex) ('body #target button ...') 그런데 이렇게 선택자가 너무 길어질 바에 차라리 id를 주는것이 나음. id는 고유한 값이기 때문에 = 1개밖에 없기 때문에
퀴즈
a 태그 안에 id가 b인 태그 안에 class가 c인 태그를 선택하려면 어떤 선택자를 사용해야하나?
.
.
.
.
.
.
.
.
.
a #b .c
'JS' 카테고리의 다른 글
| 모던 자바스크립트 Deep Dive - 전역 변수의 문제점 (0) | 2024.01.13 |
|---|---|
| 모던 자바스크립트 Deep Dive - 스코프 (1) | 2024.01.08 |
| 모던 자바스크립트 Deep Dive - 4.4장 (1) | 2024.01.07 |
| 이벤트 리스너 달기(콜백함수) (0) | 2022.07.07 |
| 대화창(prompt, alert, confirm) (0) | 2022.07.07 |
댓글