javascript-examples/doc/09_DOM_조작과_이벤트_처리.md

# DOM 조작과 이벤트 처리
DOM(Document Object Model)은 HTML 문서를 구조화하고 이를 자바스크립트를 통해 조작할 수 있게 하는 인터페이스입니다. DOM을 활용하면 HTML 요소를 생성하거나 수정하며, 이벤트 처리(Event Handling)를 통해 사용자와 상호작용하는 동적인 웹 페이지를 만들 수 있습니다.

## DOM(Document Object Model)
HTML 문서는 브라우저에서 DOM 트리라는 계층적 구조로 변환됩니다.

* DOM은 HTML 요소를 **노드(Node)**로 표현합니다.
* 자바스크립트를 통해 DOM의 요소를 읽거나 수정할 수 있습니다.

DOM 조작은 브라우저의 document 객체를 사용하여 이루어집니다.

### DOM 요소 선택
자바스크립트로 HTML 요소를 선택하는 방법은 여러 가지가 있습니다.

#### 단일 요소 선택
```javascript
// ID로 선택
const title = document.getElementById("main-title");

// CSS 선택자로 선택
const heading = document.querySelector(".heading");
```

#### 다중 요소 선택
```javascript
// 클래스 이름으로 여러 요소 선택
const items = document.getElementsByClassName("list-item");

// 태그 이름으로 여러 요소 선택
const paragraphs = document.getElementsByTagName("p");

// CSS 선택자로 여러 요소 선택
const allButtons = document.querySelectorAll("button");
```

### DOM 조작 방법
#### 텍스트 내용 변경
```javascript
const title = document.getElementById("main-title");
title.textContent = "새로운 제목입니다!"; // 텍스트 업데이트
```
#### HTML 내용 변경
```javascript
const container = document.querySelector(".container");
container.innerHTML = "<p>새로운 HTML 내용입니다.</p>";
```
#### 속성(Attribute) 변경
```javascript
const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
console.log(link.getAttribute("href")); // 속성 값 읽기
```
#### 스타일 변경
```javascript
const button = document.querySelector(".btn");
button.style.backgroundColor = "blue"; // 배경색 변경
button.style.color = "white";          // 글자색 변경
```
#### 클래스 추가/삭제
```javascript
const box = document.querySelector(".box");

// 클래스 추가
box.classList.add("active");

// 클래스 제거
box.classList.remove("hidden");

// 클래스 토글
box.classList.toggle("highlight");
```
### DOM 요소 생성 및 삭제
#### 요소 생성 및 추가
```javascript
const newItem = document.createElement("li");
newItem.textContent = "새로운 리스트 아이템";

// 부모 요소에 추가
const list = document.querySelector(".list");
list.appendChild(newItem);
```
#### 요소 삭제
```javascript
const itemToRemove = document.querySelector(".list-item");
itemToRemove.remove();
```

## 이벤트 처리(Event Handling)
이벤트는 사용자가 웹 페이지와 상호작용할 때 발생하는 사건입니다.

* 예: 클릭, 입력, 스크롤, 키보드 입력 등.

자바스크립트로 이벤트를 처리하려면 **이벤트 리스너(Event Listener)**를 사용합니다.

### 이벤트 리스너 등록

#### addEventListener 사용
```javascript
const button = document.querySelector(".btn");

button.addEventListener("click", () => {
  alert("버튼이 클릭되었습니다!");
});
```

#### HTML 속성으로 등록
이 방식은 코드 유지보수가 어렵기 때문에 권장되지 않습니다.
```html
<button onclick="alert('버튼 클릭!')">클릭</button>
```

### 주요 이벤트 종류
#### 마우스 이벤트
* click: 클릭 이벤트
* mouseover: 마우스가 요소 위로 올라왔을 때
* mouseout: 마우스가 요소 밖으로 나갔을 때

```javascript
const box = document.querySelector(".box");

// 클릭 이벤트
box.addEventListener("click", () => {
  console.log("박스를 클릭했습니다!");
});

// 마우스 오버 이벤트
box.addEventListener("mouseover", () => {
  console.log("박스 위로 마우스가 올라왔습니다.");
});
```
#### 키보드 이벤트
* keydown: 키를 눌렀을 때
* keyup: 키에서 손을 뗐을 때
```javascript
document.addEventListener("keydown", event => {
  console.log(`키가 눌렸습니다: ${event.key}`);
});
```
#### 입력 및 폼 이벤트
* input: 입력 필드의 값이 변경될 때
* submit: 폼 제출 시 발생
```javascript
const input = document.querySelector("#name-input");
input.addEventListener("input", () => {
  console.log(`입력 값: ${input.value}`);
});

const form = document.querySelector("form");
form.addEventListener("submit", event => {
  event.preventDefault(); // 기본 동작 막기
  console.log("폼이 제출되었습니다!");
});
```

### 이벤트 객체(Event Object)
이벤트 핸들러 함수는 기본적으로 이벤트 객체를 인수로 받습니다.
이 객체를 통해 이벤트에 대한 다양한 정보를 얻을 수 있습니다.
```javascript
const button = document.querySelector(".btn");

button.addEventListener("click", event => {
  console.log("클릭된 요소:", event.target); // 클릭된 요소
  console.log("이벤트 타입:", event.type);    // 이벤트 타입
  console.log("마우스 좌표:", event.clientX, event.clientY); // 클릭 위치
});
```

### 이벤트 전파(Event Propagation)
#### 이벤트 버블링 (Bubbling)
이벤트가 가장 안쪽 요소에서 시작해 부모 요소로 전파되는 현상.
```javascript
const child = document.querySelector(".child");
const parent = document.querySelector(".parent");

child.addEventListener("click", () => {
  console.log("Child 클릭!");
});

parent.addEventListener("click", () => {
  console.log("Parent 클릭!");
});
// 위 코드를 실행하면 Child 클릭! → Parent 클릭! 순서로 출력됩니다.
```
#### 이벤트 캡처링 (Capturing)
이벤트가 부모 요소에서 자식 요소로 전파되는 현상.
```javascript
parent.addEventListener(
  "click",
  () => {
    console.log("Parent (캡처링 단계)");
  },
  true // 캡처링 단계에서 실행
);
```

## DOM 조작과 이벤트 처리의 결합
```javascript
const list = document.querySelector(".list");
const addButton = document.querySelector(".add-item");

// 새로운 리스트 아이템 추가
addButton.addEventListener("click", () => {
  const newItem = document.createElement("li");
  newItem.textContent = "새로운 아이템";
  newItem.classList.add("list-item");

  // 클릭 이벤트 추가
  newItem.addEventListener("click", () => {
    alert("새로운 아이템이 클릭되었습니다!");
  });

  list.appendChild(newItem);
});
```