[JavaScript] 요소 선택, 유사 배열, 그리고 이벤트 처리 요약정리

1. 자바스크립트로 요소 선택하기

JavaScript를 사용해 HTML 태그를 선택하는 다양한 방법들:

메서드	의미	결과
document.getElementById('id')	HTML id 속성으로 요소 선택	id에 해당하는 요소 하나
document.getElementsByClassName('class')	HTML class 속성으로 요소 선택	class에 해당하는 요소 모음 (HTMLCollection)
document.getElementsByTagName('tag')	HTML 태그 이름으로 요소 선택	tag에 해당하는 요소 모음 (HTMLCollection)
document.querySelector('css')	CSS 선택자로 요소 선택	선택자에 해당하는 요소 중 첫 번째 요소 하나
document.querySelectorAll('css')	CSS 선택자로 요소 선택	선택자에 해당하는 요소 모음 (NodeList)

---

2. 유사 배열(Array-Like Object)

HTMLCollection, NodeList, DOMTokenList와 같이 배열처럼 보이지만 실제 배열은 아닌 객체를 유사 배열이라 부른다.

특징

1. 숫자 형태의 인덱싱이 가능하다.
2. length 프로퍼티를 가지고 있다.
3. 배열의 기본 메서드(push, splice 등)를 사용할 수 없다.
4. Array.isArray(유사배열)의 결과는 false다.

---

3. 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러

• 이벤트(Event): 웹 페이지에서 발생하는 사건들. 예) 버튼 클릭, 페이지 스크롤, 키보드 입력 등.
  
• 이벤트 핸들링(Event Handling): 자바스크립트를 사용해 이벤트를 다루는 작업.
  
• 이벤트 핸들러(Event Handler): 특정 이벤트가 발생했을 때 실행되는 코드. 이벤트 리스너(Event Listener)라고도 부른다.
  

---

4. 이벤트 핸들러를 등록하는 방법

4-1. JavaScript로 등록

HTML 요소의 onclick 프로퍼티에 이벤트 핸들러를 직접 할당한다.

const btn = document.querySelector('#myBtn');
const btn2 = document.querySelector('#myBtn2');

// 클릭 이벤트 핸들러 추가
myBtn.onclick = function () {
  console.log("Button was clicked!");
};

myBtn2.addEventListener("click", function () {
  console.log("Button2 was clicked!");
});

4-2. HTML 태그에 직접 작성

HTML 태그의 onclick 속성에 JavaScript 코드를 바로 작성한다.

(권장되지 않는 방식)

<button id="myBtn" onclick="console.log('Button was clicked!')">click</button>