렛츠기릿 자바스크립트 5

선택자 : id선택자(#), 태그 선택자, 클래스 선택자(.클래스)

document.querySelector('선택자') : 1개의 태그만 선택 (가장 첫번째만 선택)

document.querySelectorAll('선택자') : 여러 개 태그선택, 리턴 타입이 객체(유사배열) -NodeList




document.querySelector('#order')   : 고유한 id선택자 1개만 선택한다.

document.querySelector('div>span') : div태그의 바로 밑에 있는 자식만 선택한다.

document.querySelectorAll('div span') : div태그 안에 있는 자손"들" span을 찾아라 

document.querySelectorAll('body #target button'): body태그 안에 #target안에 button태그(들)을 찾아라 



a태그 안에 id가 b인 태그 안에 class가 c인 태그를 선택해보세요

정답: a #b .c



태그에 이벤트 달기

태그를 선택한 후에 addEventListener메서드를 사용해 이벤트를 연결한다.
첫번째 인수(Argument)는 이벤트 이름을 넣고, 두번째 인수(Argument)로는 리스터함수를 넣는다.
리스너함수는 이벤트가 발생할 때 실행되는 함수를 의미한다.

태그.addEvenListener('이벤트 이름', 리스너함수);

리스너함수=callback함수=익명함수






1단계

document.querySelector('button').addEventListener('click', function(){
    console.log('버튼 클릭');
})



2단계

const onInput = function(){
    console.log('단어 입력');
}


document.querySelector('button').addEvenListener('input', onInput);


3단계

리스너 함수의 매개변수로 event 객체를 제공해서 이벤트와 관련된 정보를 얻을 수 있다.
예를 들어, input 태그에 입력된 값을 얻어 오려면 event.target.value를 넣으면 된다.
여기서 event.target은 이벤트가 발생한 대상 태그를 가리킨다.

const 리스너함수 = (event) => {
 console.log(event.target.value);
};




입력창.value //입력창의 값을 가져옴

입력창.value = 값 // 입력창에 값을 넣음 



입력 태그(input, select, textarea 등)가 아닌 일반 태그들의 내부 값을 가져올 때는 value가 아니라 
textContent 속성을 사용합니다.

태그.textContent //태그 내부의 문자를 가져옴
태그.textContent=값 //태그 내부의 문자를 해당 값으로 설정함 


입력창.focus() //입력창을 하이라이트