📔 마크업 언어를 사용하는 표준 방식 - DOM
- 마크업 언어(HTML, XML 등)로 작성된 문서에 액세스하기 위한 표준적인 구조
- JavaScript에 한정하지 않고 현재 주로 사용되는 언어의 대부분에서 지원함
- Web 기술의 표준화 단체인 W3C에서 표준화가 진행되어 네 개의 레벌(Level 1~4)이 있으며 레벨이 높은 것이 더 고도의 기능을 제공함.
🔸 문서 트리와 노드
: DOM은 문서를 문서트리로서 취급한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>자바스크립트 마스터북</title>
</head>
<body>
<p id="greet">이것이<strong>문서트리</strong>다.</p>
</body>
</html>- DOM(Document Object Model)은 문서에 포함되는 요소나 속성, 텍스트를 각각 객체로 보기에 '객체의 집합이 문서다'라고 생각함
예를 들어 < p >...< /p >로 구성된 요소는 p 객체, < div >로 구성된 요소는 div 객체 이런 식이다. - 노드 : 문서를 구성하는 요소나 속성, 텍스트 등의 객체
✔ 요소 노드
✔ 속성 노드
✔ 텍스트 노드
| 노드 | 개요 |
|---|---|
| 루트 노드 | 트리의 최상위에 위치하는 노드. 최상위 노드 모두. |
| 부모 노드/자식 노드 | 상하 관계에 있는 노드. 직접 연결되어 있는 노드에서 루트 노드에 가까운 노드를 부모노드, 먼 노드를 자식 노드 |
| 형제 노드 | 동일 부모 노드를 가진 노드들. 먼저 작성된 것을 형 노드, 나중에 작성된 것을 동생 노드로 구분하는 경우 있음 |
- DOM은 이들 노드를 추출/추가/치환/삭제 하기 위한 범용적인 수단을 제공하는 API(Application Programming Interface)이라 할 수 있음.
