Javascript DOM 이벤트 정리

Javascript DOM 이벤트 정리

---

✅ 요소 선택

하나 선택

let 변수 = document.querySelector("CSS요소");

• 해당 CSS 셀렉터와 일치하는 첫 번째 요소만 선택됨.
• 예: 페이지에 있는 첫 번째 <div> 또는 <li> 등 선택

여러 개 선택

let 변수 = document.querySelectorAll("CSS요소");

• 조건에 맞는 요소들을 모두 NodeList로 반환함.
• 예: <li>가 여러 개 있으면 모두 선택됨

---

✅ 이벤트 연결

하나만 선택한 경우

요소.addEventListener("이벤트", 함수명);

• 하나만 선택한 요소에 이벤트 연결

여러 개 반복 연결

for문 사용

for (let i = 0; i < 변수명.length; i++) {
  변수명[i].addEventListener("이벤트", 함수명);
}

• 인덱스를 활용해 하나씩 이벤트 연결함

forEach 사용

변수명.forEach(function(값) {
  값.addEventListener("이벤트", 함수명);
});

• forEach 안의 "값"은 자동 선언되는 매개변수
• 리스트 안의 요소를 하나씩 꺼내서 함수에 넘김

---

✅ 마우스 이벤트 종류

click: 클릭했을 때
dblclick: 더블 클릭했을 때
mouseover: 마우스가 요소 위로 올라갔을 때
mouseout: 마우스가 요소를 벗어났을 때
mousedown: 마우스를 누르는 순간
mouseup: 마우스를 떼는 순간
mousemove: 마우스를 움직일 때

• 실제로 마우스의 상태나 이동을 감지해 다양한 동작을 만들 수 있음

---

✅ 키보드 이벤트 종류

keydown: 키를 누르는 순간
keyup: 키를 뗄 때
keypress: 문자 키를 누를 때 (지금은 거의 사용 안 함)

---

✅ 포커스 이벤트 예제

<input type="text" id="username">

let input = document.querySelector("#username");

input.addEventListener("focus", function() {
  console.log("입력창이 선택됐어요");
});

input.addEventListener("blur", function() {
  console.log("입력창에서 커서가 빠졌어요");
});

• focus: 입력창 클릭 시 실행
• blur: 입력창에서 포커스가 빠질 때 실행

---

✅ 폼 이벤트

submit: 폼 전송 시 발생
reset: 폼 초기화 시 발생
change: 값 변경 후 포커스가 빠질 때 (드롭다운, 체크박스 등)
input: 입력 중 실시간 발생

• 실시간 반응을 만들거나 전송 전 체크할 때 유용함

---

✅ UI 이벤트

load: 페이지 완전히 로드된 후 발생 (HTML, CSS, 이미지 포함)
scroll: 스크롤 이동 시 발생

---

✅ HTML 코드 삽입 방법 (2가지)

1. innerHTML (문자열 삽입)

let box = document.querySelector("div");
box.innerHTML = "<p>안녕</p>";

• 문자열처럼 태그 자체를 삽입함

2. 요소 생성 후 추가 (createElement + appendChild)

let newSpan = document.createElement("span");
newSpan.textContent = "하이";

let box = document.querySelector("div");
box.appendChild(newSpan);

• 직접 태그를 생성하고 원하는 요소에 붙임
• 더 정교한 조작 가능함

---

✅ 자식 요소 HTML 가져오기

<ol>
  <li>사과</li>
  <li>바나나</li>
  <li>체리</li>
</ol>

let fruitList = document.querySelector("ol");
let fullHTML = fruitList.innerHTML;         // 전체 자식 HTML
let secondItem = fruitList.children[1];     // 두 번째 자식 요소 (바나나)

• innerHTML은 문자열로 전체 내용 가져옴
• children[n]은 실제 요소로 접근 가능함

---

✅ 자식 요소 삭제

fruitList.removeChild(secondItem);

• 부모 요소에서 특정 자식을 제거하는 방식

---

✅ 속성 삽입 (setAttribute)

secondItem.setAttribute("data-fruit", "banana");

결과:

<li data-fruit="banana">바나나</li>

• 원하는 속성명을 만들고 값을 지정 가능함 (ex. id, class, data-*)

---

✅ 클래스 추가/삭제

secondItem.classList.add("highlight");
secondItem.classList.remove("highlight");

• class 속성 조작용 메서드
• add는 추가, remove는 제거

---

✅ 속성 값 가져오기 (getAttribute)

let value = secondItem.getAttribute("data-fruit");
console.log(value); // "banana"

• 속성의 값을 가져와서 변수에 저장하거나 확인 가능함

---

✅ 속성 삭제 (removeAttribute)

secondItem.removeAttribute("data-fruit");

• 속성 자체를 태그에서 없애버림

---

✅ 스타일 변경

secondItem.style.color = "red";
secondItem.style.fontWeight = "bold";

• 해당 요소의 글자 색과 굵기를 직접 조절함
• .style.속성이름 으로 조작 가능

---

✅ 여러 요소 스타일 반복 적용

let items = fruitList.querySelectorAll("li");

items.forEach(function(item) {
  item.style.backgroundColor = "lightyellow";
});

• 반복문 없이 모든 요소에 동일한 스타일을 입힐 수 있음

---

✅ forEach로 이벤트 + 클릭된 요소 스타일 변경

items.forEach(function(item) {
  item.addEventListener("click", function () {
    item.style.backgroundColor = "lightgreen";
  });
});

• 각각의 요소에 클릭 이벤트를 연결하고,
• 클릭된 요소에만 스타일을 적용함

---