안녕하세요, 여러분! 오늘은 JavaScript 수업 7강, DOM(Document Object Model) 조작에 대해 알아보겠습니다. DOM은 HTML 문서를 구조화하여 JavaScript로 조작할 수 있게 해주는 중요한 개념입니다. 그럼 시작해볼까요?
DOM이란 무엇인가요?
DOM은 Document Object Model의 약자로, HTML 문서를 계층 구조로 표현한 것입니다. 이 구조를 통해 JavaScript는 HTML 요소를 선택하고, 수정하고, 삭제하거나 새로운 요소를 추가할 수 있습니다. 쉽게 말해, DOM은 웹 페이지의 모든 요소를 JavaScript로 제어할 수 있게 해줍니다.
DOM 요소 선택하기
JavaScript에서 DOM 요소를 선택하는 방법에는 여러 가지가 있습니다. 가장 많이 사용되는 방법은 getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll입니다. 예제를 통해 하나씩 알아보겠습니다.
예제 1: getElementById
<!DOCTYPE html>
<html>
<head>
<title>DOM 조작 예제</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<script>
// 요소 선택
var titleElement = document.getElementById('title');
// 요소 내용 변경
titleElement.innerHTML = 'Hello, DOM!';
</script>
</body>
</html>
해석: 위 코드에서 document.getElementById('title')을 통해 id가 'title'인 h1 요소를 선택하고, innerHTML 속성을 이용해 해당 요소의 내용을 'Hello, DOM!'으로 변경합니다.
DOM 요소 추가하기
DOM에 새로운 요소를 추가하려면 createElement와 appendChild 메소드를 사용합니다.
예제 2: 요소 추가
<!DOCTYPE html>
<html>
<head>
<title>DOM 조작 예제</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
// 새로운 요소 생성
var newItem = document.createElement('li');
newItem.innerHTML = 'Item 3';
// 기존 요소에 추가
var list = document.getElementById('list');
list.appendChild(newItem);
</script>
</body>
</html>해석: document.createElement('li')로 새로운 li 요소를 생성하고, innerHTML로 내용을 'Item 3'으로 설정합니다. 그리고 appendChild를 통해 id가 'list'인 ul 요소에 새로 생성한 li 요소를 추가합니다.
DOM 요소 삭제하기
요소를 삭제하려면 removeChild 메소드를 사용합니다.
예제 3: 요소 삭제
<!DOCTYPE html>
<html>
<head>
<title>DOM 조작 예제</title>
</head>
<body>
<ul id="list">
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
</ul>
<script>
// 요소 선택
var itemToRemove = document.getElementById('item1');
// 부모 요소 선택
var list = document.getElementById('list');
// 요소 삭제
list.removeChild(itemToRemove);
</script>
</body>
</html>해석: document.getElementById('item1')으로 삭제할 요소를 선택하고, removeChild 메소드를 통해 부모 요소(list)에서 해당 요소를 삭제합니다.
DOM 스타일 변경하기
DOM 요소의 스타일을 변경할 때는 style 속성을 사용합니다.
예제 4: 스타일 변경
<!DOCTYPE html>
<html>
<head>
<title>DOM 조작 예제</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<script>
// 요소 선택
var titleElement = document.getElementById('title');
// 스타일 변경
titleElement.style.color = 'blue';
titleElement.style.fontSize = '2em';
</script>
</body>
</html>
해석: document.getElementById('title')으로 선택한 요소의 style 속성을 통해 글자 색상을 파란색으로, 글자 크기를 2em으로 변경합니다.
오늘은 JavaScript를 이용한 DOM 조작 방법에 대해 알아보았습니다. 다양한 요소 선택 방법부터, 요소 추가, 삭제, 스타일 변경까지 DOM을 자유자재로 다룰 수 있게 되셨나요? 다음 강의에서는 JavaScript의 이벤트 처리에 대해 더 깊이 알아보겠습니다. 그럼 다음 시간에 만나요!
- 이전 수업 목록
'프로그래밍 > JAVA Script' 카테고리의 다른 글
| [JavaScript 수업] 9강 - 모듈화와 패키지 관리 (0) | 2024.06.06 |
|---|---|
| JAVA Script수업 8강 - AJAX와 비동기 처리: 실시간 데이터 처리의 핵심 기술 (0) | 2024.06.05 |
| [JavaScript 수업] 6강 - 배열과 객체, 이해와 활용 (1) | 2024.06.03 |
| [JavaScript 수업 5강] 함수와 이벤트 처리 (0) | 2024.05.31 |
| [JavaScript 수업] 4강 - 연산자와 제어 구조 (0) | 2024.05.30 |