누에나방애벌레
DOM 제어 및 이벤트 처리 본문
웹 개발에서 자바스크립트를 활용한 DOM(Document Object Model) 제어는 매우 중요한 기술입니다. 이번 포스트에서는 DOM 트리 이해부터, 이벤트 처리 및 DOM 조작 방법을 다루어 보겠습니다.
1. DOM 트리의 이해
DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것입니다. 각 HTML 요소는 노드(node)로 표현되며, 이들 노드가 계층적으로 연결되어 있습니다.
- 문서 노드: 문서 자체를 나타내는 최상위 노드
- 요소 노드: HTML 태그를 나타내는 노드
- 텍스트 노드: 요소 내의 텍스트를 나타내는 노드
- 속성 노드: 요소의 속성을 나타내는 노드
HTML 예시:
<!DOCTYPE html>
<html>
<head>
<title>DOM 트리 예제</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>여기는 DOM 트리 예제입니다.</p>
</body>
</html>위 HTML 문서는 다음과 같은 DOM 트리 구조를 가집니다:
Document
├── html
├── head
│ ├── title
│ └── "DOM 트리 예제"
└── body
├── h1
│ └── "안녕하세요"
└── p
└── "여기는 DOM 트리 예제입니다."2. querySelector 다루기
querySelector와 querySelectorAll은 DOM에서 요소를 선택하는 데 사용됩니다. CSS 선택자를 사용하여 요소를 선택할 수 있습니다.
- querySelector: 첫 번째로 매칭되는 요소를 반환
- querySelectorAll: 모든 매칭되는 요소를 NodeList로 반환
예제:
// 첫 번째 h1 요소 선택
const heading = document.querySelector('h1');
console.log(heading.innerText); // "안녕하세요"
// 모든 p 요소 선택
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => console.log(p.innerText)); // "여기는 DOM 트리 예제입니다."3. 이벤트와 DOM
이벤트는 사용자가 웹 페이지와 상호작용하는 방식을 처리합니다. 이벤트 드리븐(event-driven) 프로그래밍을 통해 이러한 상호작용을 제어할 수 있습니다.
3.1. 이벤트 드리븐 구현
이벤트 리스너를 사용하여 특정 이벤트가 발생할 때 함수를 실행할 수 있습니다.
예제:
// 버튼 클릭 이벤트
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('버튼이 클릭되었습니다!');
});3.2. createElement
createElement를 사용하여 새로운 요소를 동적으로 생성하고 DOM에 추가할 수 있습니다.
예제:
// 새로운 p 요소 생성 및 추가
const newParagraph = document.createElement('p');
newParagraph.innerText = '동적으로 추가된 문단입니다.';
document.body.appendChild(newParagraph);3.3. change와 key 이벤트
change 이벤트는 폼 요소의 값이 변경될 때 발생하며, key 이벤트는 키보드 입력과 관련된 이벤트입니다.
예제:
// input 요소의 change 이벤트
const input = document.querySelector('input');
input.addEventListener('change', (event) => {
console.log(`변경된 값: ${event.target.value}`);
});
// keydown 이벤트
document.addEventListener('keydown', (event) => {
console.log(`눌린 키: ${event.key}`);
});결론
이번 포스트에서는 DOM 트리의 이해, querySelector 사용법, 그리고 이벤트 처리 방법에 대해 다루었습니다. DOM 트리를 이해하고, 요소를 선택하고, 이벤트를 처리하는 기술을 통해 웹 페이지의 상호작용을 효과적으로 제어할 수 있습니다.
'공부 > web' 카테고리의 다른 글
| HTTP & RESTful API (0) | 2024.08.14 |
|---|---|
| 웹 개발 기초 3 : JavaScript (2) (0) | 2024.07.20 |
| 웹 개발 기초 3 : JavaScript (1) (0) | 2024.07.20 |
| 웹 개발 기초 2 : CSS (0) | 2024.07.20 |
| 웹 개발 기초 1 : HTML (0) | 2024.07.20 |