마무리
이 장에서 배운 내용을 정리해 보겠습니다.
1. DOM
① 문서 객체 모델(DOM, Document Object Model)은 웹 브라우저에 표시되는 문서를 자바스크립트가 이해할 수 있도록 객체화한 모델 구조입니다.
② DOM은 트리 구조로 생성되는데, 이를 DOM 트리라고 합니다.
③ DOM 트리를 구성하는 노드의 타입은 다음과 같습니다.
|
타입 |
설명 |
|
문서 노드(Node.DOCUMENT_NODE) |
최상위 document 객체의 노드 타입 |
|
요소 노드(Node.ELEMENT_NODE) |
h1, p 태그와 같은 요소의 노드 타입 |
|
속성 노드(Node.ATTRIBUTE_NODE) |
href, src와 같은 속성의 노드 타입 |
|
텍스트 노드(Node.TEXT_NODE) |
텍스트에 해당하는 노드 타입 |
|
주석 노드(Node.COMMENT_NODE) |
주석에 해당하는 노드 타입 |
④ DOM 트리의 노드를 탐색하는 속성은 다음과 같습니다.
|
구분 |
속성 |
설명 |
|
모든 노드 탐색 |
parentNode |
부모 노드를 반환합니다. |
|
childNodes |
모든 자식 노드를 반환합니다. |
|
|
firstChild |
첫 번째 자식 노드를 반환합니다. |
|
|
lastChild |
마지막 자식 노드를 반환합니다. |
|
|
previousSibling |
이전 형제 노드를 반환합니다. |
|
|
nextSibling |
다음 형제 노드를 반환합니다. |
|
|
요소 노드 탐색 |
parentElement |
부모 요소 노드를 반환합니다. |
|
children |
자식 요소 노드를 반환합니다. |
|
|
firstElementChild |
첫 번째 자식 요소 노드를 반환합니다. |
|
|
lastElementChild |
마지막 자식 요소 노드를 반환합니다. |
|
|
previousElementSibling |
이전 요소 노드를 반환합니다. |
|
|
nextElementSibling |
다음 요소 노드를 반환합니다. |