이번 포스팅은 JavaScript의 DOM(문서 객체 모델) 조작에 대해 알아보겠습니다.
DOM은 웹 페이지의 구조를 JavaScript로 조작할 수 있게 해주는 중요한 개념입니다.
함께 예제를 통해 배워보겠습니다.
1. DOM이란 무엇인가?
DOM은 Document Object Model의 약자로, HTML 문서의 구조를 표현한 객체 모델입니다.
DOM을 사용하면 JavaScript로 웹 페이지의 내용을 동적으로 변경할 수 있습니다.
쉽게 말해, DOM은 웹 페이지의 "나무" 구조와 같아서, 각 요소는 나뭇잎처럼 연결되어 있습니다.
예를 들어, 다음과 같은 HTML 코드가 있다고 가정해봅시다:
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM 예제</title>
</head>
<body>
<h1 id="title">안녕하세요!</h1>
<p class="content">이것은 DOM 조작 예제입니다.</p>
</body>
</html>위의 HTML 문서에서 <h1> 태그와 <p> 태그는 DOM의 요소입니다.
2. 요소 선택 방법
JavaScript에서는 DOM 요소를 선택하는 여러 방법이 있습니다. 가장 많이 사용되는 두 가지 방법은 getElementById와 querySelector입니다.
2.1 getElementById
getElementById 메서드는 특정 ID를 가진 요소를 선택합니다.
예제:
const titleElement = document.getElementById('title');
console.log(titleElement); // <h1 id="title">안녕하세요!</h1>2.2 querySelector
querySelector 메서드는 CSS 선택자를 사용하여 요소를 선택합니다.
ID, 클래스, 태그 이름 등 다양한 방법으로 요소를 선택할 수 있습니다.
예제:
const contentElement = document.querySelector('.content');
console.log(contentElement); // <p class="content">이것은 DOM 조작 예제입니다.</p>
3. 요소 생성, 수정 및 삭제
DOM을 사용하면 요소를 생성하고, 수정하고, 삭제할 수 있습니다.
3.1 요소 생성
새로운 요소를 생성하려면 createElement 메서드를 사용합니다.
예제:
const newElement = document.createElement('div');
newElement.textContent = '새로 생성된 요소입니다!';
document.body.appendChild(newElement);
3.2 요소 수정
선택한 요소의 내용을 수정할 수 있습니다.
예제:
const titleElement = document.getElementById('title');
titleElement.textContent = '안녕하세요, JavaScript!';
3.3 요소 삭제
요소를 삭제하려면 remove 메서드를 사용합니다.
예제:
const contentElement = document.querySelector('.content');
contentElement.remove();
4. 이벤트 핸들링
JavaScript를 사용하면 사용자와의 상호작용을 처리할 수 있습니다.
이벤트 핸들링을 통해 클릭, 마우스 오버 등의 이벤트를 처리할 수 있습니다.
4.1 클릭 이벤트
버튼을 클릭했을 때 특정 작업을 수행하도록 설정할 수 있습니다.
예제:
<button id="myButton">클릭하세요!</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});
</script>
4.2 마우스 오버 이벤트
마우스를 요소 위에 올렸을 때의 이벤트를 처리할 수 있습니다.
예제:
<p id="hoverText">여기를 마우스 오버 해보세요!</p>
<script>
const hoverText = document.getElementById('hoverText');
hoverText.addEventListener('mouseover', function() {
hoverText.style.color = 'red';
});
hoverText.addEventListener('mouseout', function() {
hoverText.style.color = 'black';
});
</script>
5.마치며
이렇게 JavaScript의 DOM 조작에 대해 알아보았습니다.
DOM을 활용하면 웹 페이지를 동적으로 변화시킬 수 있는 강력한 도구가 됩니다.
연습을 통해 더 많은 기능을 익히고, 재미있는 프로젝트를 만들어 보세요.
'IT프로그램 언어 > JavaScript' 카테고리의 다른 글
| Java스크립트(Promise) (3) | 2024.11.25 |
|---|---|
| Java스크립트(콜백함수) (2) | 2024.11.24 |
| Java스크립트(객체) (1) | 2024.11.22 |
| Java스크립트(배열) (0) | 2024.11.21 |
| Java스크립트(익명 함수,화살표 함수, 고차 함수) (5) | 2024.11.20 |