0.querySelector()
1.querySelectorAll()
2.getElementById()
3.keydown 이벤트
querySelector()
지정된 선택자와 일치하는 도큐먼트의 첫번째 요소(element)를 반환한다. 일치하는 요소가 없으면 null을 반환한다.
querySelectorAll()
지정된 셀렉터 그룹에 일치하는 도큐먼트의 element list를 나타낸다. 즉 NodeList를 반환한다.
지정된 셀렉터가 없는 경우에는 비어있는 NodeList로 반환된다.
NodeList가 배열은 아니다
대표적으로 length 속성을 가지며,forEach()함수를 사용하여 반복할 수 있다.
Array.from()을 사용하여 Arry로 변환도 가능하다.그러나 일부 오래된 브라우저에서는 forEach(),Array.from()을 사용할 수 없다.
getElementById()
주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 요소 객체를 반환한다.
단 id는 문서 내에서 유일해야 한다. 때문에 특정 요소를 빠르게 찾을 때 유용하다.
keydown 이벤트
키보드의 키가 눌렸을 때 발생하는 이벤트이다.
keydown 이벤트는 키보드의 키에 의해 발생하는 이벤트로 단축키를 만들 수 있다.
어떤 키가 눌려졌는지 확인하는 방법으로는 아래와 같이 확인해볼 수 있으며, 키값에 따른 키코드가 있기에 이를 활용하면 좋을것 같다.
const handleKeyborad = (event) => {
console.log("kedown : ", event.code);
};
window.addEventListener("keydown", handleKeyborad);