이번에는 자바스크립트의 주요 기능 중 하나인 DOM (Document Object Model)에 대해 정리해 보겠습니다. 이 기능은 자바스크립트 기능의 하나일 뿐만 아니라 HTML을 분석에 대한 기본적인 개념을 이해할 수 있고 또, 요즘 많이 쓰이는 기술 중 하나인 웹크롤링의 기본적인 개념과도 연결됩니다.
자바스크립트 DOM (Document Object Model)
DOM은 'Document Object Model'의 약자로, 한국어로는 '문서 객체 모델'이라고 번역할 수 있습니다. 이는 웹 페이지의 내용을 프로그래밍 언어(이 경우 자바스크립트)로 조작할 수 있게 해주는 인터페이스입니다.
DOM을 이해하기 위해, 우리가 보는 웹 페이지를 하나의 문서로 생각해 봅시다. 이 문서는 여러 요소들(예: 제목, 단락, 이미지, 링크 등)로 구성되어 있습니다. DOM은 이 문서를 마치 나무와 같은 구조로 표현합니다. 이를 우리는 'DOM 트리'라고 부릅니다.
- 문서(Document)는 전체 트리의 뿌리(root)가 됩니다.
- HTML 태그들은 나뭇가지(branch)가 됩니다.
- 텍스트나 속성들은 잎사귀(leaf)가 됩니다.
자바스크립트를 사용하면 이 DOM 트리의 어떤 부분이든 접근하고 수정할 수 있습니다. 이는 마치 정원사가 나무의 어떤 부분이든 가지를 치거나, 새 잎을 붙이거나, 꽃을 피울 수 있는 것과 비슷합니다.
DOM의 주요 개념
노드(Node)
DOM에서 모든 객체는 '노드'라고 불립니다. 노드는 DOM 트리의 각 부분을 나타냅니다. 주요 노드 유형은 다음과 같습니다.
- 문서 노드(Document Node): 전체 HTML 문서를 나타냅니다.
- 요소 노드(Element Node): HTML 태그를 나타냅니다. (예:
<p>,<div>,<span>등) - 텍스트 노드(Text Node): HTML 태그 내의 텍스트를 나타냅니다.
- 속성 노드(Attribute Node): HTML 태그의 속성을 나타냅니다.
요소 선택하기
DOM을 조작하기 위해서는 먼저 조작하고자 하는 요소를 선택해야 합니다. 자바스크립트는 이를 위한 여러 메서드를 제공합니다.
getElementById(): ID로 요소를 선택합니다.getElementsByClassName(): 클래스 이름으로 요소들을 선택합니다.getElementsByTagName(): 태그 이름으로 요소들을 선택합니다.querySelector(): CSS 선택자로 첫 번째 일치하는 요소를 선택합니다.querySelectorAll(): CSS 선택자로 일치하는 모든 요소를 선택합니다.
예시를 통해 각 메서드의 사용법을 살펴보겠습니다.
// ID로 요소 선택하기
const header = document.getElementById('main-header');
// 클래스 이름으로 요소들 선택하기
const paragraphs = document.getElementsByClassName('content');
// 태그 이름으로 요소들 선택하기
const allDivs = document.getElementsByTagName('div');
// CSS 선택자로 첫 번째 일치하는 요소 선택하기
const firstButton = document.querySelector('button');
// CSS 선택자로 일치하는 모든 요소 선택하기
const allLinks = document.querySelectorAll('a');이 코드를 실행하려면, 먼저 HTML 파일이 필요합니다.
다음과 같은 HTML 파일을 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 예제</title>
</head>
<body>
<header id="main-header">
<h1>DOM 학습하기</h1>
</header>
<main>
<p class="content">이것은 첫 번째 단락입니다.</p>
<p class="content">이것은 두 번째 단락입니다.</p>
<div>
<button>클릭하세요</button>
</div>
<div>
<a href="#">링크 1</a>
<a href="#">링크 2</a>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
그리고 script.js 파일에 위의 자바스크립트 코드를 넣으면 됩니다.
요소 조작하기
요소를 선택한 후에는 다양한 방법으로 조작할 수 있습니다.
- 내용 변경하기
textContent: 요소의 텍스트 내용을 가져오거나 설정합니다.innerHTML: 요소의 HTML 내용을 가져오거나 설정합니다.
- 스타일 변경하기
style속성을 사용하여 인라인 스타일을 변경할 수 있습니다.
- 클래스 조작하기
classList를 사용하여 클래스를 추가, 제거, 토글 할 수 있습니다.
- 속성 조작하기
getAttribute(),setAttribute(),removeAttribute()메서드를 사용합니다.
예시 코드를 통해 이러한 조작 방법을 살펴보겠습니다.
// 내용 변경하기
const header = document.getElementById('main-header');
header.textContent = '새로운 제목';
const firstParagraph = document.querySelector('.content');
firstParagraph.innerHTML = '이 단락의 내용이 변경되었습니다.';
// 스타일 변경하기
header.style.color = 'blue';
header.style.backgroundColor = 'yellow';
// 클래스 조작하기
firstParagraph.classList.add('highlight');
firstParagraph.classList.remove('content');
firstParagraph.classList.toggle('visible');
// 속성 조작하기
const link = document.querySelector('a');
console.log(link.getAttribute('href')); // '#' 출력
link.setAttribute('href', 'https://www.example.com');
link.removeAttribute('target');이 코드를 실행하려면, 위에서 만든 HTML 파일에 다음과 같은 스타일을 추가하고, script.js 파일에 위의 자바스크립트 코드를 추가하면 됩니다.
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
.visible {
display: block;
}
</style>이벤트 처리
DOM의 강력한 기능 중 하나는 사용자 상호작용에 반응할 수 있다는 것입니다. 이를 '이벤트 처리'라고 합니다.
이벤트 리스너 추가하기
요소에 이벤트 리스너를 추가하는 방법은 다음과 같습니다.
const button = document.querySelector('button');
button.addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});이 코드는 버튼에 클릭 이벤트 리스너를 추가합니다. 버튼이 클릭되면 경고창이 나타납니다.
여러 가지 이벤트 유형
자주 사용되는 이벤트 유형에는 다음과 같은 것들이 있습니다.
click: 요소가 클릭되었을 때mouseover: 마우스가 요소 위로 이동했을 때mouseout: 마우스가 요소에서 벗어났을 때keydown: 키보드 키를 눌렀을 때submit: 폼이 제출되었을 때
예시를 통해 여러 이벤트를 처리하는 방법을 살펴보겠습니다.
const button = document.querySelector('button');
const link = document.querySelector('a');
const input = document.createElement('input'); // 새로운 input 요소 생성
document.body.appendChild(input); // body에 input 요소 추가
button.addEventListener('click', function() {
console.log('버튼이 클릭되었습니다!');
});
link.addEventListener('mouseover', function() {
this.style.color = 'red';
});
link.addEventListener('mouseout', function() {
this.style.color = 'blue';
});
input.addEventListener('keydown', function(event) {
console.log(`키가 눌렸습니다: ${event.key}`);
});
// 폼 제출 이벤트 처리를 위해 폼을 생성하고 제출 버튼을 추가합니다
const form = document.createElement('form');
const submitButton = document.createElement('button');
submitButton.textContent = '제출';
submitButton.type = 'submit';
form.appendChild(input); // 위에서 만든 input을 폼에 추가
form.appendChild(submitButton);
document.body.appendChild(form);
form.addEventListener('submit', function(event) {
event.preventDefault(); // 폼의 기본 제출 동작을 막습니다
console.log('폼이 제출되었습니다!');
});이 코드를 실행하려면, 위에서 만든 HTML 파일의 <script> 태그 바로 위에 다음 코드를 추가하세요.
<form id="myForm">
<input type="text" id="myInput">
<button type="submit">제출</button>
</form>그리고 script.js 파일에 위의 자바스크립트 코드를 추가하면 됩니다.
DOM 요소 생성 및 삭제
새로운 요소 생성하기
새로운 요소를 생성하고 문서에 추가하는 방법은 다음과 같습니다.
// 새로운 단락 요소 생성
const newParagraph = document.createElement('p');
// 텍스트 노드 생성
const text = document.createTextNode('이것은 새로운 단락입니다.');
// 텍스트 노드를 단락에 추가
newParagraph.appendChild(text);
// 단락을 문서의 body에 추가
document.body.appendChild(newParagraph);
요소 삭제하기
요소를 삭제하는 방법은 다음과 같습니다.
const paragraphToRemove = document.querySelector('p');
paragraphToRemove.parentNode.removeChild(paragraphToRemove);
// 또는 더 현대적인 방법:
// paragraphToRemove.remove();'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| 자바스크립트 네트워크 Fetch API와 비동기 처리 가이드 - 자바스크립트 #11 (0) | 2024.07.26 |
|---|---|
| AJAX를 사용한 비동기 JavaScript와 서버 통신, AJAX의 작동 원리와 예제 - 자바스크립트 #10 (0) | 2024.07.24 |
| 자바스크립트 이벤트 객체와 리스너 addEventListener 활용법 - 자바스크립트 #8 (0) | 2024.07.19 |
| 자바스크립트 배열 기초와 활용. 배열 메서드와 다차원 배열 - 자바스크립트 #7 (0) | 2024.07.16 |
| 자바스크립트 객체 리터럴과 생성자 함수 활용법 가이드 - 자바스크립트 #6 (0) | 2024.07.15 |