6일차: DOM 조작과 이벤트 처리

2025. 2. 1. 14:47

이번 6일차에서는 DOM(Document Object Model)을 사용하여 웹 페이지의 요소를 조작하고, 이벤트 처리를 통해 사용자와의 상호작용을 구현하는 방법을 배웁니다.

DOM(Document Object Model)

DOM은 HTML 문서의 구조를 객체 모델로 표현한 것입니다. 자바스크립트를 사용하여 DOM을 통해 웹 페이지의 요소를 선택하고, 수정할 수 있습니다. DOM은 HTML 문서의 각 요소(태그)를 객체로 변환하며, 자바스크립트 코드로 웹 페이지를 동적으로 조작할 수 있게 합니다.

DOM이란 무엇인가?

DOM은 웹 페이지의 구조를 트리 형태로 표현한 모델로, 웹 페이지를 동적으로 업데이트하고 제어할 수 있게 도와줍니다. HTML 문서의 각 태그는 DOM 객체로 변환되어 자바스크립트를 통해 조작할 수 있습니다.
HTML과 자바스크립트의 관계

자바스크립트는 DOM을 통해 HTML 요소와 상호작용할 수 있습니다. HTML은 웹 페이지의 구조를 정의하고, 자바스크립트는 그 구조를 동적으로 수정하거나 상호작용을 추가합니다.
DOM 요소 선택하기

DOM에서 특정 요소를 선택하는 방법은 여러 가지가 있습니다. 가장 흔히 사용되는 방법은 getElementById()와 querySelector()입니다.
- document.getElementById(): 아이디가 지정된 HTML 요소를 선택합니다.
```
const heading = document.getElementById("header");
console.log(heading);  // id가 "header"인 요소를 반환
```
- document.querySelector(): CSS 선택자를 사용하여 요소를 선택합니다.
```
const firstButton = document.querySelector("button");
console.log(firstButton);  // 첫 번째 버튼 요소를 반환
```

DOM 요소의 속성, 텍스트, 스타일 변경

속성 변경:

const img = document.querySelector("img");
img.src = "new-image.jpg";  // 이미지 소스 변경

텍스트 변경:

const paragraph = document.querySelector("p");
paragraph.textContent = "새로운 텍스트로 변경";  // 텍스트 변경

스타일 변경:

const div = document.querySelector("div");
div.style.backgroundColor = "lightblue";  // 배경색 변경
div.style.fontSize = "20px";  // 폰트 크기 변경

이벤트 처리

웹 페이지에서 사용자가 클릭, 입력 등의 행동을 할 때 발생하는 이벤트를 처리하는 방법을 배웁니다. 자바스크립트는 이벤트 리스너를 사용하여 이런 상호작용을 제어할 수 있습니다.

이벤트 리스너 등록하기

이벤트 리스너를 사용하면 특정 이벤트가 발생할 때마다 자바스크립트 코드가 실행되도록 할 수 있습니다.
- click 이벤트: 사용자가 버튼을 클릭할 때 발생
- submit 이벤트: 폼이 제출될 때 발생
- keydown 이벤트: 키보드에서 키가 눌릴 때 발생
- change 이벤트: 입력 값이 변경될 때 발생
이벤트 리스너는 addEventListener() 메서드를 사용하여 등록합니다.
```
const button = document.querySelector("button");

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

addEventListener() 메서드 사용

addEventListener() 메서드는 이벤트 종류와 이를 처리할 콜백 함수를 인자로 받습니다. 이벤트가 발생하면 콜백 함수가 실행됩니다.

click 이벤트 처리 예시:

const changeColorButton = document.querySelector("#changeColor");

changeColorButton.addEventListener("click", function() {
    document.body.style.backgroundColor = "lightgreen";
});

keydown 이벤트 처리 예시:

document.addEventListener("keydown", function(event) {
    console.log(`키보드에서 누른 키: ${event.key}`);
});

실습

버튼 클릭 시 색상 변경

목표: 버튼을 클릭하면 웹 페이지의 배경색이 바뀌는 기능 구현.

실습 코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>버튼 클릭 색상 변경</title>
</head>
<body>
    <button id="changeColor">배경색 변경</button>

    <script>
        const button = document.getElementById("changeColor");

        button.addEventListener("click", function() {
            document.body.style.backgroundColor = "lightblue";  // 색상 변경
        });
    </script>
</body>
</html>

버튼 클릭 시 텍스트 출력

목표: 버튼을 클릭하면 특정 텍스트를 페이지에 출력하는 기능 구현.

실습 코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 출력</title>
</head>
<body>
    <button id="showMessage">메시지 표시</button>
    <p id="message"></p>

    <script>
        const button = document.getElementById("showMessage");
        const messageParagraph = document.getElementById("message");

        button.addEventListener("click", function() {
            messageParagraph.textContent = "자바스크립트는 재미있어요!";
        });
    </script>
</body>
</html>

정리

오늘은 DOM 조작과 이벤트 처리에 대해 배웠습니다. DOM을 사용하여 HTML 요소를 선택하고, 속성이나 스타일을 수정하는 방법을 익혔으며, addEventListener()를 통해 사용자의 상호작용에 반응할 수 있는 방법을 배웠습니다. 실습을 통해 버튼 클릭 시 웹 페이지의 배경색을 변경하거나 텍스트를 출력하는 기능을 구현했습니다.

저작자표시

'개발 > Javascript' 카테고리의 다른 글

7일차: 자바스크립트 심화 개념 및 실습 프로젝트 (1)	2025.02.02
5일차: 객체와 배열 (0)	2025.01.31
자바스크립트에서 null과 undefined의 차이점 완벽 분석 (0)	2025.01.31
4일차: 함수와 스코프 (0)	2025.01.30
3일차: 조건문과 반복문 (0)	2025.01.29

subinto의 개발노트