2025-01-26T02:15:33

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

@@ -0,0 +1,214 @@
+# 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);
+});
+```