자바스크립트 선택자

js선택자 지정 - document.querySelector

qeurySelector의 선택자 이름은 css의 선택자와 비슷하다.''(작은따옴표)안에
선택자를 적어야 한다.

document.querySelector('#id이름');
document.querySelector('.class이름');
2개부터는 querySelectorAll을 써야 함.
document.querySelectorAll('button.btn');

div의 자손인 span을 선택하여 $span 을 지정함.
const $span = document.querySelector('div span');

document.querySelector('선택자 내부선택자 ...');

선택자가 길어질 땐 id를 주는 것이 낫다.

이벤트 등록하기 - addEventListner

태그.addEventListener('이벤트이름',함수);

document.querySelector('input').addEventListener
('input',funciton(){console.log('버튼이 클릭되었습니다!'});

함수자리에 변수로 선언한 함수를 집어넣을 수도 있음 (재사용될 때 필수)

const onClick = function (){console.log('버튼이 클릭되었습니다!');}
document.querySelector(input).addEventListener('click',onClick);

글자를 입력받은 후 입력받은 글자를 콘솔에 표시하는 법(화살표 함수 사용)

const onInput = (event) => {console.log(event.target.value);}: