querySelector
자바스크립트에서는 HTML 태그를 가져오는 것을 선택한다고 표현한다.
querySelector는 선택하기 위해 사용하는 함수이고, 사용 방법은 다음과 같다.
document.querySelector('선택자')선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열을 의미한다.
태그가 여러 개 있는 경우에 모두 선택하고 싶을 경우 querySelectorAll 함수를 사용한다.
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<button>버튼2</button>
<button>버튼3</button>
<script>
const $$buttons = document.querySelectorAll('button');
console.log($$buttons);
</script>
</body>
버튼이 세 개 이므로 콘솔 창에 세 개의 태그가 동시에 표시된다.
여러 개를 한 번에 표시하려고 배열을 사용한 것처럼 보이지만, 실제로는 배열이 아니라 NodeList라는 특수한 객체이다.
세 개의 버튼 중 두 번째와 세 번째 버튼을 동시에 선택하고 싶을 경우 class를 사용한다.
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<button class="hello">버튼2</button>
<button class="hello">버튼3</button>
<script>
const $buttons = document.querySelectorAll('.hello');
console.log($buttons);
</script>
</body>이때도 document.querySelectorAll 대신 document.querySelector를 사용하면 하나의 태그만 선택되니 주의!
이벤트 리스너 달기
사용자가 태그와 상호 작용을 할 떄 이벤트라는 것이 발생한다.
예시로 input 태그에 글자를 입력하면 input이라는 이벤트가 발생하고, 버튼을 클릭하면 click 이벤트가 발생한다.
이처럼 다양한 이벤트가 발생하지만, 자바스크립트는 이벤트를 자동으로 감지하진 못한다.
그래서 이벤트 리스너를 추가해 자바스크립트가 HTML에서 발생하는 이벤트를 감지할 수 있게 한다.
이벤트가 발생할 때 실행할 함수를 만들고, 이 함수를 button 태그에 연결했다.
<script>
const onClickButton = () => {
console.log('버튼 클릭');
};
const $button = document.querySelector('button');
$button.addEventListener('click', onClickButton);
</script>
이벤트 리스너를 달 때는 addEventListener 함수를 사용하고, 사용 방법은 다음과 같다.
태그.addEventListener('이벤트 이름', 리스너함수);
리스너 함수를 넣을 때 onClickButton()과 같이 넣으면 함수가 실행되니 onClickButton 함수 자체를 넣어야 한다는 것에 주의!
이때 onClickButton과 같은 함수를 콜백 함수라고 한다.
콜백 함수는 특정 작업이 실행되고 난 뒤에 추가로 실행되는 함수를 의미한다.
버튼 클릭 후에 onClickButton이 추가적으로 실행되니 콜백 함수라고 볼 수 있다.
아래는 input 태그에 글자를 입력하면 input 이벤트가 발생하는 코드이다.
<script>
const onInput = (event) => {
console.log('글자 입력', event.target.value);
};
const $input = document.querySelector('input');
$input.addEventListener('input', onInput);
</script>onInput 함수에는 매개변수로 event가 존재한다.
이벤트 리스너에 넣는 함수에는 매개변수로 이벤트에 관한 정보가 제공된다. (addEventListener가 제공)
event.target.value로 input 태그에 입력한 값을 알아낼 수 있다.
매개변수의 이름은 어떻게 지어도 상관없지만 보통 event나 e로 짓는 경우가 많다.
textContent는 태그 내부의 값을 얻거나 수정할 떄 사용한다.
textContent는 무조건 문자열로 나오므로 만일 태그가 빈 값이어도 null이나 undefined가 아니라 ''이 나온다.
기본적으로 태그 내부의 값을 선택할 때는 textContent를 사용하지만 입력 태그의 경우는 value를 사용한다.
input태그가 대표적인 입력 태그이다. 다른 입력 태그로는 select와 textarea가 있다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 자바스크립트 실행 컨텍스트(Execution Context)란? (0) | 2022.10.18 |
|---|---|
| [JS] 고차 함수 (0) | 2022.05.02 |
| [JS] 이벤트 버블링 / 이벤트 위임 (0) | 2022.04.11 |
| [JS] 코딩앙마 자바스크립트 중급 강좌 정리 (0) | 2021.09.28 |
| [JS] 호이스팅, TDZ, 동기·비동기, 콜 스택 동작 (0) | 2021.09.23 |