0408 웹 개발 기초 복습 (2/N): JavaScript와 DOM
✅ 1. JavaScript: 웹 페이지에 생명 불어넣기
- HTML이 웹 페이지의 구조를, CSS가 스타일을 담당한다면, JavaScript는 사용자의 상호작용에 반응하여 웹 페이지의 콘텐츠나 스타일을 동적으로 변경하는 동작(Behavior)을 담당합니다.
- JavaScript의 핵심 역할 중 하나는 브라우저가 HTML 문서를 객체 형태로 모델링한 DOM(Document Object Model)을 조작하는 것입니다.
✅ 2. DOM (Document Object Model)
- DOM은 웹 브라우저가 HTML 문서를 해석하여, JavaScript가 문서의 구조, 스타일, 내용과 상호작용할 수 있도록 객체(Object) 트리 형태로 모델링한 것입니다. 즉, DOM은 JavaScript와 HTML 사이의 인터페이스(API) 역할을 합니다.
➕ DOM 요소 선택 (Selecting Elements)
- JavaScript로 HTML 요소를 조작하려면, 먼저 원하는 요소를 선택해야 합니다.
| 메서드 | 설명 |
|---|---|
document.getElementById('id') | id 속성으로 요소 하나를 선택. (가장 빠름) |
document.querySelector('selector') | CSS 선택자 문법으로 가장 먼저 일치하는 요소 하나를 선택. (매우 유용하고 강력함) |
document.querySelectorAll('selector') | CSS 선택자 문법으로 일치하는 모든 요소를 NodeList(유사 배열)로 선택. |
// <h1 id="title">Hello</h1>
const titleElement = document.getElementById('title');
// <button class="btn">Click Me</button>
const buttonElement = document.querySelector('.btn');✅ 3. 이벤트 (Events)와 이벤트 처리
- 이벤트는 웹 페이지에서 발생하는 모든 종류의 상호작용이나 사건을 의미합니다. (e.g., 클릭, 마우스 오버, 키보드 입력, 페이지 로딩 완료 등)
- 이벤트 핸들링은 이러한 이벤트가 발생했을 때, 특정 JavaScript 코드를 실행하도록 연결하는 과정입니다.
➕ 이벤트 리스너 추가 (addEventListener)
-
element.addEventListener('eventType', eventHandlerFunction)메서드를 사용하는 것이 가장 표준적이고 권장되는 방법입니다.const myButton = document.querySelector('#my-button'); // 이벤트 핸들러 함수 function handleClick() { alert('Button was clicked!'); } // 버튼에 'click' 이벤트가 발생하면 handleClick 함수를 실행하도록 등록 myButton.addEventListener('click', handleClick); -
이벤트 객체: 이벤트 핸들러 함수는 이벤트 객체를 첫 번째 인자로 받습니다. 이 객체에는 이벤트에 대한 상세 정보(e.g.,
event.target- 이벤트가 발생한 요소)가 담겨 있습니다.
✅ 4. DOM 조작 (Manipulating Elements)
-
선택한 DOM 요소의 내용을 변경하거나, 스타일을 바꾸고, 새로운 요소를 추가/삭제할 수 있습니다.
-
내용 및 속성 변경:
element.textContent = 'New text': 요소의 텍스트 내용만 변경.element.innerHTML = '<h1>New HTML</h1>': 요소 내부에 HTML 코드를 삽입. (보안 주의)
-
스타일 변경:
element.style.color = 'red': 인라인 스타일을 직접 변경.element.classList.add('active'): 클래스 추가.element.classList.remove('hidden'): 클래스 제거.element.classList.toggle('highlight'): 클래스 토글(있으면 제거, 없으면 추가).
-
요소 생성 및 추가/삭제:
document.createElement('div'): 새로운 요소를 생성.parentElement.appendChild(childElement): 자식 요소로 추가.element.remove(): 요소 자신을 제거.
✅ 5. 종합 예제: 간단한 Todo 리스트 만들기
-
지금까지 배운 개념을 종합하여, 사용자가 할 일을 입력하고 추가할 수 있는 간단한 Todo 리스트를 만들어 봅니다.
-
HTML:
<input type="text" id="todo-input" placeholder="할 일을 입력하세요"> <button id="add-btn">추가</button> <ul id="todo-list"></ul> -
JavaScript:
// 1. DOM 요소 선택 const input = document.querySelector('#todo-input'); const addButton = document.querySelector('#add-btn'); const list = document.querySelector('#todo-list'); // 2. 이벤트 리스너 등록 addButton.addEventListener('click', function() { const todoText = input.value; // 입력값이 없으면 아무것도 하지 않음 if (todoText === '') { return; } // 3. DOM 요소 생성 및 조작 const newListItem = document.createElement('li'); // 새로운 <li> 요소 생성 newListItem.textContent = todoText; // 내용 설정 list.appendChild(newListItem); // <ul>에 자식으로 추가 // 입력창 비우기 input.value = ''; input.focus(); });
📌 요약
- JavaScript는 DOM API를 통해 정적인 HTML 문서를 객체처럼 선택하고 조작하여 동적인 웹 페이지를 만듭니다.
- 핵심적인 작업 흐름은 [1. 요소 선택 (
querySelector)] → [2. 이벤트 감지 (addEventListener)] → [3. 요소 조작 (textContent,classList,appendChild등)] 순서로 이루어집니다. - 이러한 DOM 직접 조작 방식의 기본 원리를 이해하는 것은, 나중에 React와 같은 현대적인 라이브러리가 왜 등장했는지를 이해하는 데 큰 도움이 됩니다.
