1. DOM이란?
DOM(Document Object Model)은 웹 페이지의 구조를 트리 형태로 표현한 것입니다. 각 HTML 요소는 DOM의 노드로 변환되며, JavaScript는 이 DOM을 통해 페이지의 콘텐츠와 구조를 동적으로 조작할 수 있습니다.
예를 들어, 아래와 같은 HTML 구조가 있다면:
<!DOCTYPE html>
<html lang="ko">
<head>
<title>DOM 기초</title>
</head>
<body>
<h1 id="main-title">Hello, World!</h1>
<p class="description">이것은 JavaScript DOM 조작 예제입니다.</p>
</body>
</html>DOM은 다음과 같은 트리 구조로 표현됩니다:
- html
- head
- title
- body
- h1#main-title
- p.description2. DOM 요소 선택
DOM 요소를 선택하려면 JavaScript에서 제공하는 다양한 메서드를 사용할 수 있습니다.
1) getElementById
id 속성을 기준으로 요소를 선택합니다.
const title = document.getElementById("main-title");
console.log(title); // <h1 id="main-title">Hello, World!</h1>2) querySelector와 querySelectorAll
CSS 선택자와 동일한 문법을 사용하여 요소를 선택할 수 있습니다. querySelector는 첫 번째 일치하는 요소 하나를 반환하고, querySelectorAll은 모든 일치하는 요소의 NodeList를 반환합니다.
const paragraph = document.querySelector(".description");
console.log(paragraph); // <p class="description">이것은 JavaScript DOM 조작 예제입니다.</p>
const allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs); // NodeList(모든 <p> 요소)3) getElementsByClassName과 getElementsByTagName
클래스나 태그 이름을 기준으로 요소를 선택합니다.
const descriptions = document.getElementsByClassName("description");
console.log(descriptions[0]); // 첫 번째 <p class="description"> 요소
const headings = document.getElementsByTagName("h1");
console.log(headings[0]); // 첫 번째 <h1> 요소3. DOM 요소 조작
선택한 요소의 내용을 변경하거나 스타일을 추가하는 방법을 알아보겠습니다.
1) 요소 내용 변경
textContent와 innerHTML을 사용하여 요소의 텍스트나 HTML 콘텐츠를 변경할 수 있습니다.
const title = document.getElementById("main-title");
title.textContent = "Hello, JavaScript!"; // 텍스트만 변경
title.innerHTML = "<span>Hello, <strong>JavaScript!</strong></span>"; // HTML 태그 포함 가능2) 스타일 조작
style 속성을 사용하여 요소의 인라인 스타일을 추가할 수 있습니다.
const title = document.getElementById("main-title");
title.style.color = "blue";
title.style.fontSize = "36px";3) 클래스 추가 및 제거
classList를 사용하여 클래스 이름을 동적으로 추가, 제거, 토글할 수 있습니다.
title.classList.add("highlight"); // 클래스 추가
title.classList.remove("highlight"); // 클래스 제거
title.classList.toggle("active"); // 클래스가 있으면 제거, 없으면 추가4. 이벤트 처리
JavaScript에서는 다양한 이벤트를 감지하고 이를 처리할 수 있습니다. 클릭, 마우스 이동, 키보드 입력 등 다양한 이벤트가 있으며, 이벤트가 발생했을 때 특정 함수(이벤트 핸들러)를 실행할 수 있습니다.
1) 이벤트 리스너 추가
addEventListener 메서드를 사용해 이벤트를 요소에 연결할 수 있습니다.
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("버튼이 클릭되었습니다!");
});2) 이벤트 객체 사용
이벤트 핸들러는 이벤트 객체를 통해 다양한 정보를 제공합니다.
button.addEventListener("click", (event) => {
console.log(event.type); // 이벤트 타입 출력 (예: "click")
console.log(event.target); // 이벤트가 발생한 요소 출력
});3) 기본 이벤트 방지
폼 제출이나 링크 클릭 같은 기본 동작을 막기 위해 preventDefault() 메서드를 사용할 수 있습니다.
const link = document.querySelector("a");
link.addEventListener("click", (event) => {
event.preventDefault(); // 링크 이동 방지
alert("링크 클릭이 방지되었습니다.");
});실전 예제: 간단한 버튼 클릭으로 텍스트 변경하기
HTML:
<!DOCTYPE html>
<html lang="ko">
<head>
<title>버튼 클릭 예제</title>
</head>
<body>
<h1 id="main-title">클릭해보세요!</h1>
<button id="change-text-button">텍스트 변경</button>
<script src="example.js"></script>
</body>
</html>JavaScript (example.js):
document.getElementById("change-text-button").addEventListener("click", () => {
const title = document.getElementById("main-title");
title.textContent = "JavaScript로 텍스트가 변경되었습니다!";
});코드 설명
- 버튼을 클릭하면 addEventListener로 연결된 이벤트 핸들러가 실행되어, 제목의 텍스트가 변경됩니다.
요약
이번 강의에서는 JavaScript로 DOM을 선택하고 조작하는 방법과 이벤트를 처리하는 기본적인 방법을 배웠습니다. DOM은 웹 페이지를 동적으로 조작할 수 있는 강력한 도구이며, 이벤트 핸들링을 통해 다양한 사용자 상호작용을 구현할 수 있습니다. 다음 강의에서는 JavaScript의 배열과 객체를 다루는 방법을 심화 학습해보겠습니다.
'Study > JS' 카테고리의 다른 글
| JavaScript 기초 강의 6편: DOM 심화 조작과 동적 이벤트 핸들링 (0) | 2024.12.06 |
|---|---|
| JavaScript 기초 강의 5편: 비동기 프로그래밍과 Promise, async/await (0) | 2024.12.05 |
| JavaScript 기초 강의 4편: 함수의 고급 사용법 (클로저, 콜백 함수, 화살표 함수) (0) | 2024.12.04 |
| JavaScript 기초 강의 3편: 배열과 객체 다루기 (0) | 2024.12.03 |
| JavaScript 기초 강의 1편: JavaScript 기본 문법과 개념 (1) | 2024.12.01 |
