1. 오늘의 학습 목표
학습 목표: JavaScript를 사용하여 HTML 문서를 객체 모델로 표현한 DOM(Document Object Model)을 이해합니다. DOM 요소를 선택하고, 내용을 변경하며, 사용자의 클릭과 같은 이벤트(Event)에 반응하여 동적인 웹 페이지를 만드는 방법을 배웁니다.
핵심 요약: DOM 조작과 이벤트 처리는 정적인 HTML 문서를 사용자와 상호작용하는 살아있는 웹 애플리케이션으로 만드는 핵심 기술입니다.
2. 핵심 개념 파헤치기
2.1. DOM이란?
DOM은 브라우저가 HTML 웹 페이지를 해석하여 만든, 문서의 구조화된 표현입니다. 브라우저는 HTML 태그들을 나무(Tree) 구조의 객체로 변환하는데, JavaScript는 이 객체 모델에 접근하여 문서의 구조, 스타일, 내용 등을 변경할 수 있습니다. 즉, DOM은 JavaScript가 HTML을 제어할 수 있게 해주는 다리 역할을 합니다.
2.2. DOM 요소 선택하기
JavaScript로 HTML 요소를 조작하려면, 먼저 원하는 요소를 선택해야 합니다
- document.getElementById('id이름'): 주어진 id를 가진 요소를 선택합니다. (가장 빠름)
- document.querySelector('CSS선택자'): 주어진 CSS 선택자와 일치하는 첫 번째 요소를 선택합니다. (매우 유연하고 강력함)
- document.querySelectorAll('CSS선택자'): 주어진 CSS 선택자와 일치하는 모든 요소를 NodeList(배열과 유사) 형태로 반환합니다
2.3. DOM 조작하기
요소를 선택했다면, 다양한 속성을 이용해 내용을 변경하거나 스타일을 바꿀 수 있습니다.
- .textContent: 요소 안의 텍스트 내용만 변경합니다.
- .innerHTML: 요소 안의 HTML 구조 자체를 변경합니다. (보안상 주의 필요)
- .style: 요소의 인라인 스타일을 변경합니다. (예: element.style.color = 'red';)
- .setAttribute('속성이름', '값'): 요소의 속성(attribute) 값을 변경합니다.
2.4. 이벤트 처리)
이벤트는 웹 페이지에서 발생하는 사용자의 행동(클릭, 키보드 입력 등)이나 상태의 변화를 의미합니다. JavaScript는 이러한 이벤트를 감지하고 특정 코드를 실행할 수 있습니다.
- 이벤트 리스너: 특정 요소에서 발생하는 이벤트를 '듣고' 있다가, 이벤트가 발생하면 지정된 함수(이벤트 핸들러)를 실행하는 역할입니다.
- element.addEventListener: 이벤트를 등록하는 가장 현대적이고 표준적인 방법입니다.
3. 코드로 배우기
3.1. 구현 목표
버튼을 클릭하면 페이지의 제목 텍스트와 색상이 바뀌는 간단한 상호작용을 구현합니다.
3.2. [1단계: 상호작용을 위한 HTML 구조 만들기]
JavaScript로 선택할 수 있도록 id를 가진 <h1> 태그와 <button> 태그를 만듭니다.
<h1 id="main-title">Hello, JavaScript!</h1>
<button id="change-btn">Click Me!</button>
3.3. [2단계: JavaScript로 DOM 요소 선택하기]
querySelector를 사용하여 <h1> 요소와 <button> 요소를 변수에 저장합니다.
const titleElement = document.querySelector('#main-title');
const changeButton = document.querySelector('#change-btn');
3.4. [3단계: 버튼에 이벤트 리스너 추가하기]
버튼에 click 이벤트가 발생했을 때 실행될 함수를 addEventListener를 이용해 등록합니다.
changeButton.addEventListener('click', () => {
//버튼이 클릭되면 이 안의 코드가 실행됩니다.
});
3.5. [4단계: 이벤트 발생 시 DOM 조작하기]
이벤트 리스너 함수 안에서, titleElement의 textContent와 style을 변경하는 코드를 작성합니다.
changeButton.addEventListener('click', () => {
titleElement.textContent = 'DOM is controlled!';
titleElement.style.color = 'blue';
});
4. 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS DOM Manipulation</title>
</head>
<body>
<h1 id="main-title">Hello, JavaScript!</h1>
<button id="change-btn">Click Me!</button>
<script>
//1. DOM 요소 선택
const titleElement = document.querySelector('#main-title');
const changeButton = document.querySelector('#change-btn');
//2. 이벤트 리스너 등록
changeButton.addEventListener('click', () => {
//3. 이벤트 발생 시 실행될 로직 (DOM 조작)
console.log('버튼이 클릭되었습니다!');
titleElement.textContent = 'DOM is now controlled by JavaScript!';
titleElement.style.color = 'tomato';
titleElement.style.backgroundColor = '#f0f0f0';
});
</script>
</body>
</html>'개발 > 웹 개발' 카테고리의 다른 글
| Day 17: JavaScript 비동기 (Async/Await) (1) | 2024.08.20 |
|---|---|
| Day 16: JavaScript 비동기 (콜백과 프로미스) (0) | 2024.08.18 |
| Day 14: JavaScript 객체와 배열 (1) | 2024.08.14 |
| Day 13: JavaScript 함수와 제어문 (0) | 2024.08.12 |
| Day 12: JavaScript 데이터 타입과 변수 (1) | 2024.08.09 |
