-
JavaScript에서 DOM과 이벤트스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 1. 17. 13:18
JavaScript에서 DOM(Document Object Model)과 이벤트는 웹 개발에서 핵심적인 역할을 한다. DOM은 HTML 문서를 구조화하고 조작할 수 있게 하며, 이벤트는 사용자와의 상호작용을 처리하는 메커니즘을 제공한다.
01. DOM(Document Object Model)이란?
DOM은 HTML 문서의 계층 구조를 트리 형태로 표현한 것으로, JavaScript를 사용하여 문서를 동적으로 조작할 수 있게 한다. DOM은 HTML 요소를 노드(node)로 간주하며, 노드는 크게 다음과 같이 분류된다:
요소 노드(Element Node): <div>, <p>와 같은 HTML 태그
텍스트 노드(Text Node): 요소 내부의 텍스트
속성 노드(Attribute Node): 요소의 속성
DOM 요소 선택
JavaScript는 다양한 방법으로 DOM 요소를 선택할 수 있다:
document.getElementById("id"): 특정 ID를 가진 요소를 선택
document.querySelector("선택자"): CSS 선택자를 이용해 첫 번째 일치 요소를 선택
document.querySelectorAll("선택자"): CSS 선택자를 이용해 모든 일치 요소를 선택
예시:
const heading = document.getElementById("main-heading");
const paragraphs = document.querySelectorAll("p");
DOM 조작
선택한 DOM 요소를 JavaScript로 조작할 수 있다:
내용 변경: textContent, innerHTML
속성 변경: setAttribute, getAttribute
스타일 변경: style 속성
예시:
const element = document.querySelector("#myElement");
element.textContent = "새로운 텍스트";
element.style.color = "red";
02. 이벤트(Event)란?
이벤트는 사용자나 브라우저가 수행하는 특정 동작을 나타낸다. 버튼 클릭, 키보드 입력, 페이지 로드 등이 대표적인 이벤트이다. JavaScript는 이벤트 리스너를 사용하여 이러한 이벤트를 처리할 수 있다.
이벤트 리스너 추가
JavaScript에서는 addEventListener 메서드를 사용하여 이벤트 리스너를 추가할 수 있다.
형식:
element.addEventListener("이벤트 유형", 함수);
예시:
const button = document.querySelector("#myButton");
button.addEventListener("click", function () {
alert("버튼이 클릭되었습니다!");
});
주요 이벤트 유형
마우스 이벤트:
click: 클릭 시 발생
mouseover: 요소 위로 마우스를 올릴 때 발생
mouseout: 요소에서 마우스를 뗄 때 발생
키보드 이벤트:
keydown: 키를 눌렀을 때 발생
keyup: 키를 뗐을 때 발생
폼 이벤트:
submit: 폼 제출 시 발생
change: 입력 필드 값 변경 시 발생
문서 이벤트:
DOMContentLoaded: HTML 문서가 로드되고 DOM이 완전히 생성되었을 때 발생
이벤트 객체
이벤트가 발생하면 JavaScript는 자동으로 이벤트 객체를 전달한다. 이벤트 객체는 다음과 같은 유용한 정보를 제공한다:
target: 이벤트가 발생한 요소
type: 이벤트 유형
preventDefault(): 기본 동작 방지
stopPropagation(): 이벤트 전파 중단
예시:
const link = document.querySelector("a");
link.addEventListener("click", function (event) {
event.preventDefault(); // 기본 동작 방지
console.log("링크 클릭 이벤트가 발생했습니다.");
});
03. DOM과 이벤트의 결합
DOM과 이벤트는 함께 사용되어 동적인 웹 페이지를 구현한다. 아래는 DOM 요소와 이벤트를 결합한 간단한 예제이다:
예제: 클릭 시 텍스트 변경
<!DOCTYPE html>
<html>
<head>
<title>DOM과 이벤트 예제</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<button id="changeTextButton">텍스트 변경</button>
<script>
const button = document.querySelector("#changeTextButton");
const heading = document.querySelector("#heading");
button.addEventListener("click", function () {
heading.textContent = "텍스트가 변경되었습니다!";
});
</script>
</body>
</html>
DOM과 이벤트는 JavaScript에서 웹 페이지를 동적으로 조작하고, 사용자와의 상호작용을 처리하는 데 중요한 역할을 한다. 다양한 이벤트와 DOM 조작 방법을 활용하여 사용자 경험을 향상시킬 수 있다.'스터디 > [패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기' 카테고리의 다른 글
useEffect와 리액트 라우팅 개념 정리 (0) 2025.02.14 자바스크립트 런타임과 이벤트 루프, 비동기 처리에 대한 이해 (5) 2025.01.24 [데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(4) : JS (4) 2025.01.10 [데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(2) : HTML (4) 2025.01.03 [데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(1) : 개요 및 세팅 (5) 2024.12.27