S08L01 - DOM 객체

html

DOM 이해하기: 초보자와 개발자를 위한 종합 가이드
목차

DOM 소개 ...................1
DOM 구조 .......................3
DOM 트리 탐색 .................6
JavaScript로 DOM 수정하기 .......9
DOM 메서드 및 속성 ..........12
실용적인 예제 ...........................15
결론 .............................................18


DOM 소개
Document Object Model(DOM)에 대한 이 종합 가이드에 오신 것을 환영합니다. 웹 개발의 세계에 발을 들여놓는 초보자이든 지식을 보강하려는 숙련된 개발자이든, DOM을 이해하는 것은 동적이고 인터랙티브한 웹 페이지를 만드는 데 필수적입니다.
DOM이란 무엇인가요?
DOM은 HTML 또는 XML 문서의 객체 표현으로, 웹 페이지와 JavaScript와 같은 프로그래밍 언어 간의 다리 역할을 합니다. 웹 페이지를 계층적 트리 구조로 조직하여 개발자가 콘텐츠를 동적으로 탐색, 수정 및 조작할 수 있게 합니다.
DOM의 중요성

인터랙티비티: 페이지를 다시 로드하지 않고도 동적 콘텐츠 업데이트를 가능하게 하여 사용자 경험을 향상시킵니다.
유연성: 웹페이지의 구조, 스타일 및 콘텐츠를 실시간으로 변경할 수 있습니다.
통합: JavaScript가 웹 페이지와 상호 작용하고 수정할 수 있도록 하는 Backbone 역할을 합니다.

DOM 사용의 장단점


장점
단점


동적 콘텐츠 조작을 용이하게 함
잘못 사용할 경우 성능 문제를 일으킬 수 있음


사용자 상호작용을 향상시킴
문서가 커질수록 복잡성이 증가함


페이지 재로드 없이 실시간 업데이트 가능
트리 구조에 대한 이해가 필요함


DOM을 언제 어디서 사용할까

동적 웹 애플리케이션: 폼, 게임 또는 대시보드와 같은 인터랙티브한 기능을 구축할 때.
실시간 콘텐츠 업데이트: 채팅 애플리케이션이나 라이브 피드와 같은 실시간 데이터 업데이트가 필요한 애플리케이션에 적합.
웹페이지 콘텐츠 조작: 사용자 행동이나 이벤트에 따라 요소를 추가, 제거 또는 수정해야 할 때.


DOM 구조
DOM의 구조를 이해하는 것은 웹 페이지를 효과적으로 조작하는 데 기본입니다. DOM은 문서를 트리 구조로 나타내며, 각 노드는 문서의 일부를 나타내는 객체입니다.
DOM 트리
DOM의 핵심은 DOM 트리로, HTML 문서의 구조를 반영하는 계층적 트리 형태의 구조입니다.
예시 DOM 트리




		
		
			
			
Java
			
			Document
│
├── HTML
    │
    ├── Head
    │   └── Title
    │
    └── Body
        ├── H1
        │   └── Text Node
        └── A Tag
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						Document
│
├── HTML
    │
    ├── Head
    │   └── Title
    │
    └── Body
        ├── H1
        │   └── Text Node
        └── A Tag
					
				
			
		


주요 구성 요소

Document: 전체 HTML 또는 XML 문서를 나타내는 루트 노드.
Element Nodes: <html>, <head>, <body>, <h1>, <a> 등과 같은 HTML 요소를 나타냅니다.
Text Nodes: 요소 내의 텍스트 콘텐츠를 포함합니다.
Attributes: class, id, href 등과 같은 요소의 속성.

계층적 표현
DOM 트리의 각 요소는 자식 노드, 부모 노드 및 형제 노드를 가질 수 있어 구조화되고 탐색 가능한 프레임워크를 만듭니다.

DOM 트리 탐색
효과적인 DOM 조작은 특정 요소에 접근하고 이를 수정하기 위해 DOM 트리를 탐색하는 능력에 의존합니다.
노드 접근하기
JavaScript는 DOM 내의 노드에 접근하기 위해 여러 메서드를 제공합니다:

document.getElementById(): 요소의 id로 선택합니다.
document.getElementsByClassName(): 특정 class를 가진 모든 요소를 선택합니다.
document.getElementsByTagName(): 특정 태그 이름을 가진 모든 요소를 선택합니다.
document.querySelector(): CSS 선택자와 일치하는 첫 번째 요소를 선택합니다.
document.querySelectorAll(): CSS 선택자와 일치하는 모든 요소를 선택합니다.

DOM 순회하기
노드를 선택한 후, 그 관계를 순회할 수 있습니다:

Parent Node: parentNode를 사용하여 요소의 부모에 접근합니다.
Child Nodes: childNodes를 사용하여 모든 자식 노드에 접근하거나, children를 사용하여 요소 자식에 접근합니다.
Sibling Nodes: nextSibling 및 previousSibling을 사용하여 형제 간을 탐색합니다.

예제: 노드 접근 및 순회하기




		
		
			
			
Java
			
			// body 요소 선택
const body = document.body;

// body의 부모 노드에 접근 (HTML)
const parent = body.parentNode;

// body의 첫 번째 자식에 접근 (예: h1 태그)
const firstChild = body.firstElementChild;

// 요소 로그 출력
console.log(parent);      // 출력: <html>...</html>
console.log(firstChild);  // 출력: <h1>...</h1>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						// body 요소 선택
const body = document.body;
 
// body의 부모 노드에 접근 (HTML)
const parent = body.parentNode;
 
// body의 첫 번째 자식에 접근 (예: h1 태그)
const firstChild = body.firstElementChild;
 
// 요소 로그 출력
console.log(parent);      // 출력: <html>...</html>
console.log(firstChild);  // 출력: <h1>...</h1>
					
				
			
		



JavaScript로 DOM 수정하기
JavaScript는 DOM을 활용하여 웹 페이지의 콘텐츠, 구조 및 스타일을 동적으로 업데이트합니다. 이 섹션에서는 DOM 요소를 생성, 수정 및 조작하는 방법을 탐구합니다.
요소 생성하기
document.createElement()를 사용하여 새 요소를 생성합니다.




		
		
			
			
Java
			
			// 새 단락 요소 생성
const newParagraph = document.createElement('p');
newParagraph.textContent = '이것은 새 단락입니다.';
			
				
					
				
					1
2
3
				
						// 새 단락 요소 생성
const newParagraph = document.createElement('p');
newParagraph.textContent = '이것은 새 단락입니다.';
					
				
			
		


요소 추가하기
appendChild() 또는 append()를 사용하여 새로 생성된 요소를 DOM에 추가합니다.




		
		
			
			
Java
			
			// 새 단락을 body에 추가
document.body.appendChild(newParagraph);
			
				
					
				
					1
2
				
						// 새 단락을 body에 추가
document.body.appendChild(newParagraph);
					
				
			
		


기존 요소 수정하기
기존 요소의 콘텐츠나 속성을 변경합니다.




		
		
			
			
Java
			
			// 기존 h1 요소의 텍스트 변경
const header = document.querySelector('h1');
header.textContent = '업데이트된 헤딩';

// 앵커 태그의 속성 수정
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
			
				
					
				
					1
2
3
4
5
6
7
				
						// 기존 h1 요소의 텍스트 변경
const header = document.querySelector('h1');
header.textContent = '업데이트된 헤딩';
 
// 앵커 태그의 속성 수정
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
					
				
			
		


요소 제거하기
removeChild() 또는 remove()를 사용하여 DOM에서 요소를 삭제합니다.




		
		
			
			
Java
			
			// 새로 추가된 단락 제거
document.body.removeChild(newParagraph);

// 또는 remove() 사용
newParagraph.remove();
			
				
					
				
					1
2
3
4
5
				
						// 새로 추가된 단락 제거
document.body.removeChild(newParagraph);
 
// 또는 remove() 사용
newParagraph.remove();
					
				
			
		



DOM 메서드 및 속성
DOM은 개발자가 웹 페이지와 효과적으로 상호 작용하고 조작할 수 있도록 다양한 메서드와 속성을 제공합니다.
자주 사용되는 DOM 메서드


메서드
설명


getElementById(id)
요소의 id로 요소를 가져옵니다.


getElementsByClassName(class)
지정된 class를 가진 모든 요소를 가져옵니다.


getElementsByTagName(tag)
지정된 태그를 가진 모든 요소를 가져옵니다.


querySelector(selector)
선택자와 일치하는 첫 번째 요소를 가져옵니다.


querySelectorAll(selector)
선택자와 일치하는 모든 요소를 가져옵니다.


createElement(tag)
지정된 태그 이름으로 새 요소를 생성합니다.


appendChild(child)
지정된 부모 노드에 자식 노드를 추가합니다.


removeChild(child)
지정된 부모 노드에서 자식 노드를 제거합니다.


setAttribute(attr, value)
지정된 요소의 속성 값을 설정합니다.


자주 사용되는 DOM 속성


속성
설명


innerHTML
요소 내의 HTML 콘텐츠를 가져오거나 설정합니다.


textContent
요소 내의 텍스트 콘텐츠를 가져오거나 설정합니다.


parentNode
요소의 부모 노드를 참조합니다.


childNodes
요소의 모든 자식 노드를 참조합니다.


nextSibling
요소의 다음 형제 노드를 참조합니다.


previousSibling
요소의 이전 형제 노드를 참조합니다.


attributes
요소의 모든 속성을 참조합니다.


style
요소의 인라인 스타일을 수정할 수 있게 합니다.



실용적인 예제
DOM에 대한 이해를 공고히 하기 위해, DOM 요소에 접근하고 수정하며 조작하는 실용적인 예제를 함께 살펴보겠습니다.
예제 시나리오
다음과 같은 HTML 구조가 있다고 상상해 보세요:




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>내 웹사이트</title>
</head>
<body>
    <h1>내 웹사이트에 오신 것을 환영합니다</h1>
    <p id="intro">이것은 소개 단락입니다.</p>
    <a href="https://www.original.com" id="myLink">원본 방문하기</a>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						<!DOCTYPE html>
<html>
<head>
    <title>내 웹사이트</title>
</head>
<body>
    <h1>내 웹사이트에 오신 것을 환영합니다</h1>
    <p id="intro">이것은 소개 단락입니다.</p>
    <a href="https://www.original.com" id="myLink">원본 방문하기</a>
</body>
</html>
					
				
			
		


목표

헤딩 텍스트 변경하기.
단락 내용 업데이트하기.
링크 URL과 텍스트 수정하기.
새 단락을 동적으로 추가하기.

단계별 구현
1. 헤딩 접근 및 수정




		
		
			
			
Java
			
			// h1 요소 선택
const heading = document.querySelector('h1');

// 텍스트 콘텐츠 업데이트
heading.textContent = '놀라운 웹 개발을 발견하세요!';
			
				
					
				
					1
2
3
4
5
				
						// h1 요소 선택
const heading = document.querySelector('h1');
 
// 텍스트 콘텐츠 업데이트
heading.textContent = '놀라운 웹 개발을 발견하세요!';
					
				
			
		


2. 단락 내용 업데이트




		
		
			
			
Java
			
			// ID로 단락 선택
const paragraph = document.getElementById('intro');

// 텍스트 콘텐츠 변경
paragraph.textContent = 'DOM을 조작하여 동적 웹 페이지를 만드는 방법을 배우세요.';
			
				
					
				
					1
2
3
4
5
				
						// ID로 단락 선택
const paragraph = document.getElementById('intro');
 
// 텍스트 콘텐츠 변경
paragraph.textContent = 'DOM을 조작하여 동적 웹 페이지를 만드는 방법을 배우세요.';
					
				
			
		


3. 링크 URL과 텍스트 수정




		
		
			
			
Java
			
			// ID로 앵커 태그 선택
const link = document.getElementById('myLink');

// href 속성 업데이트
link.setAttribute('href', 'https://www.example.com');

// 링크 텍스트 변경
link.textContent = '예제 방문하기';
			
				
					
				
					1
2
3
4
5
6
7
8
				
						// ID로 앵커 태그 선택
const link = document.getElementById('myLink');
 
// href 속성 업데이트
link.setAttribute('href', 'https://www.example.com');
 
// 링크 텍스트 변경
link.textContent = '예제 방문하기';
					
				
			
		


4. 새 단락을 동적으로 추가하기




		
		
			
			
Java
			
			// 새 단락 요소 생성
const newParagraph = document.createElement('p');

// 텍스트 콘텐츠 설정
newParagraph.textContent = '이 단락은 JavaScript를 사용하여 동적으로 추가되었습니다.';

// 새 단락을 body에 추가
document.body.appendChild(newParagraph);
			
				
					
				
					1
2
3
4
5
6
7
8
				
						// 새 단락 요소 생성
const newParagraph = document.createElement('p');
 
// 텍스트 콘텐츠 설정
newParagraph.textContent = '이 단락은 JavaScript를 사용하여 동적으로 추가되었습니다.';
 
// 새 단락을 body에 추가
document.body.appendChild(newParagraph);
					
				
			
		


전체 코드 예제




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>내 웹사이트</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 헤딩 접근 및 수정
            const heading = document.querySelector('h1');
            heading.textContent = '놀라운 웹 개발을 발견하세요!';

            // 단락 내용 업데이트
            const paragraph = document.getElementById('intro');
            paragraph.textContent = 'DOM을 조작하여 동적 웹 페이지를 만드는 방법을 배우세요.';

            // 링크 URL과 텍스트 수정
            const link = document.getElementById('myLink');
            link.setAttribute('href', 'https://www.example.com');
            link.textContent = '예제 방문하기';

            // 새 단락을 동적으로 추가하기
            const newParagraph = document.createElement('p');
            newParagraph.textContent = '이 단락은 JavaScript를 사용하여 동적으로 추가되었습니다.';
            document.body.appendChild(newParagraph);
        });
    </script>
</head>
<body>
    <h1>내 웹사이트에 오신 것을 환영합니다</h1>
    <p id="intro">이것은 소개 단락입니다.</p>
    <a href="https://www.original.com" id="myLink">원본 방문하기</a>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
				
						<!DOCTYPE html>
<html>
<head>
    <title>내 웹사이트</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 헤딩 접근 및 수정
            const heading = document.querySelector('h1');
            heading.textContent = '놀라운 웹 개발을 발견하세요!';
 
            // 단락 내용 업데이트
            const paragraph = document.getElementById('intro');
            paragraph.textContent = 'DOM을 조작하여 동적 웹 페이지를 만드는 방법을 배우세요.';
 
            // 링크 URL과 텍스트 수정
            const link = document.getElementById('myLink');
            link.setAttribute('href', 'https://www.example.com');
            link.textContent = '예제 방문하기';
 
            // 새 단락을 동적으로 추가하기
            const newParagraph = document.createElement('p');
            newParagraph.textContent = '이 단락은 JavaScript를 사용하여 동적으로 추가되었습니다.';
            document.body.appendChild(newParagraph);
        });
    </script>
</head>
<body>
    <h1>내 웹사이트에 오신 것을 환영합니다</h1>
    <p id="intro">이것은 소개 단락입니다.</p>
    <a href="https://www.original.com" id="myLink">원본 방문하기</a>
</body>
</html>
					
				
			
		


출력 설명
JavaScript가 실행된 후:

<h1> 텍스트가 "놀라운 웹 개발을 발견하세요!"로 변경됩니다.
id="intro"를 가진 단락의 내용이 "DOM을 조작하여 동적 웹 페이지를 만드는 방법을 배우세요."로 업데이트됩니다.
앵커 태그의 href 속성이 "https://www.example.com"으로 변경되고, 텍스트가 "예제 방문하기"로 업데이트됩니다.
본문 끝에 "이 단락은 JavaScript를 사용하여 동적으로 추가되었습니다."라는 텍스트를 가진 새 단락이 추가됩니다.


결론
Document Object Model(DOM)은 웹 개발에 참여하는 모든 사람에게 필수적인 개념입니다. DOM은 웹 문서를 구조화된 방식으로 표현하여 동적 상호작용과 실시간 콘텐츠 조작을 가능하게 합니다. DOM을 숙달함으로써 더욱 인터랙티브하고 반응성이 뛰어나며 사용자 친화적인 웹 애플리케이션을 만들 수 있습니다.
주요 내용 요약

DOM 구조: DOM의 트리 구조를 이해하는 것은 웹 페이지를 탐색하고 조작하는 데 기본입니다.
요소 접근: 다양한 DOM 메서드를 활용하여 웹 문서 내의 특정 요소를 선택하고 접근합니다.
조작 기술: 요소를 생성, 수정 및 제거하여 웹 페이지의 인터랙티비티를 향상시킵니다.
실용적 응용: 실습 예제를 통해 이론적 지식을 공고히 하여 실제 시나리오에 적용하기 용이하게 합니다.

DOM의 힘을 활용하여 웹 개발 기술을 향상시키고 돋보이는 인터랙티브하고 동적인 웹사이트를 만들어보세요.
SEO 키워드: DOM, Document Object Model, 웹 개발, JavaScript DOM 조작, 동적 웹 페이지, DOM 메서드, DOM 초보자 가이드, JavaScript 초보자, DOM 조작, 인터랙티브 웹 페이지
참고: 이 기사는 AI가 생성했습니다.
메서드	설명
getElementById(id)	요소의 `id`로 요소를 가져옵니다.
getElementsByClassName(class)	지정된 `class`를 가진 모든 요소를 가져옵니다.
getElementsByTagName(tag)	지정된 태그를 가진 모든 요소를 가져옵니다.
querySelector(selector)	선택자와 일치하는 첫 번째 요소를 가져옵니다.
querySelectorAll(selector)	선택자와 일치하는 모든 요소를 가져옵니다.
createElement(tag)	지정된 태그 이름으로 새 요소를 생성합니다.
appendChild(child)	지정된 부모 노드에 자식 노드를 추가합니다.
removeChild(child)	지정된 부모 노드에서 자식 노드를 제거합니다.
setAttribute(attr, value)	지정된 요소의 속성 값을 설정합니다.
장점	단점
동적 콘텐츠 조작을 용이하게 함	잘못 사용할 경우 성능 문제를 일으킬 수 있음
사용자 상호작용을 향상시킴	문서가 커질수록 복잡성이 증가함
페이지 재로드 없이 실시간 업데이트 가능	트리 구조에 대한 이해가 필요함
속성	설명
innerHTML	요소 내의 HTML 콘텐츠를 가져오거나 설정합니다.
textContent	요소 내의 텍스트 콘텐츠를 가져오거나 설정합니다.
parentNode	요소의 부모 노드를 참조합니다.
childNodes	요소의 모든 자식 노드를 참조합니다.
nextSibling	요소의 다음 형제 노드를 참조합니다.
previousSibling	요소의 이전 형제 노드를 참조합니다.
attributes	요소의 모든 속성을 참조합니다.
style	요소의 인라인 스타일을 수정할 수 있게 합니다.