1.1 DOM의 주요 개념
문서 객체 모델 (DOM)은 웹 문서에 대한 프로그래밍 인터페이스야. 문서 구조를 노드 트리로 나타내며, 각 노드는 문서의 일부로, 요소, 텍스트, 주석 등으로 구성돼. DOM과 그 노드를 이해하는 것은 웹 기술을 다루는 데 있어 필수야.
DOM의 주요 개념들
DOM이란?
DOM (Document Object Model)은 HTML 문서의 내용을 설명하는 계층 구조야. 애플리케이션과 스크립트가 문서 내용에 동적으로 접근하고 구조, 스타일, 내용을 변경할 수 있게 해줘.
노드와 요소
DOM 맥락에서 문서의 모든 부분은 노드 (node)로 간주돼. 노드는 몇 가지 유형이 있어:
- 요소 노드: HTML 태그를 나타냄.
- 텍스트 노드: 요소 노드에 포함된 텍스트를 나타냄.
- 주석 노드: HTML 주석을 나타냄.
- 문서 노드: 전체 문서를 나타냄.
노드 트리
DOM은 트리 같은 구조를 가지며 각 노드는 자식 노드들을 가질 수 있어. 루트 노드는 전체 HTML 문서를 나타내는 document 객체야.
DOM 구조 예시:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
이 문서의 DOM 트리는 다음과 같이 보일 거야:
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 노드의 유형
1. 요소 노드
요소 노드는 HTML 태그에 해당해. 예를 들어, <body> 태그의 노드는 요소 노드라고 불러.
예시:
이 예시에서 <body>와 <h1>는 요소 노드야.
<body>
<h1>Hello, World!</h1>
</body>
2. 텍스트 노드
텍스트 노드는 요소 노드 내부의 텍스트를 포함해. 텍스트 노드는 요소 노드의 자식 노드로 존재하며 문자열 데이터를 포함하고 있어.
예시:
이 예시에서 텍스트 "Hello, World!"는 <h1> 노드의 자식인 텍스트 노드야.
<h1>Hello, World!</h1>
3. 주석 노드
주석 노드는 HTML 주석을 나타내며, <!--로 시작해서 -->로 끝나.
예시:
이 예시에서 <!-- This is a comment -->는 주석 노드야.
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. 문서 노드
문서 노드는 DOM 트리의 루트 노드이며, 문서의 다른 모든 노드의 부모 노드야.
예시:
JavaScript의 document 객체는 문서 노드를 나타내:
console.log(document);
1.3 DOM 노드와의 상호작용
1. 노드 정보 얻기
노드 객체의 속성을 통해 특정 노드에 대한 정보를 얻을 수 있어. 예를 들어, 노드의 유형, 이름, 내용을 알 수 있지.
예시:
<html>
<head>
<title>내 웹사이트</title>
</head>
<body>
<h1>안녕, 세상!</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // 출력: H1
console.log(heading.nodeType); // 출력: 1 (요소 노드)
console.log(heading.textContent); // 출력: "안녕, 세상!"
2. 노드 내용 수정
DOM 속성과 메서드를 사용하여 노드의 내용을 변경할 수 있어.
예시:
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated text content';
3. 자식 노드 다루기
DOM의 각 노드는 자식 노드를 가질 수 있으며, 자식 노드에 접근하고 수정할 수 있어.
예시:
<html>
<head>
<title>내 웹사이트</title>
</head>
<body>
<ul>
<li>회사 소개</li>
<li>채용 정보</li>
<li>연락처</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // 첫 번째 리스트 항목의 텍스트 출력
console.log(lastItem.textContent); // 마지막 리스트 항목의 텍스트 출력
1.4 유용한 속성들
1. 속성 nodeName과 nodeType
nodeName은 노드 이름을 반환해nodeType은 노드 유형을 반환해 (예: 1은 요소 노드, 3은 텍스트 노드)
예시:
<html>
<head>
<title>내 웹사이트</title>
</head>
<body>
<h1>안녕, 세상!</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // 출력: H1
console.log(element.nodeType); // 출력: 1
2. 속성 textContent와 innerHTML
textContent는 노드의 텍스트 콘텐츠를 반환하거나 설정해innerHTML은 노드의 HTML 콘텐츠를 반환하거나 설정해
예시:
<html>
<head>
<title>내 웹사이트</title>
</head>
<body>
<p>정말 <b>흥미롭고</b> <b>유익한</b> 문단!</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // 문단의 텍스트 콘텐츠 출력
console.log(element.innerHTML); // 문단의 HTML 콘텐츠 출력
3. 속성 parentNode, childNodes, firstChild와 lastChild
parentNode는 부모 노드를 반환해childNodes는 모든 자식 노드의 컬렉션을 반환해firstChild는 첫 번째 자식 노드를 반환해lastChild는 마지막 자식 노드를 반환해
예시:
<html>
<head>
<title>내 웹사이트</title>
</head>
<body>
<ul>
<li>회사 소개</li>
<li>채용 정보</li>
<li>연락처</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // 부모 노드 출력
console.log(element.childNodes); // 자식 노드 컬렉션 출력
console.log(element.firstChild); // 첫 번째 자식 노드 출력
console.log(element.lastChild); // 마지막 자식 노드 출력
GO TO FULL VERSION