혼자서 정리하는 자바스크립트 이론
이번 포스팅에서는 웹 페이지를 제어하는 API인 DOM(Document Object Model)의 기본적인 것들을 정리해보겠습니다.
DOM 트리
웹 페이지의 모든 요소를 Document 객체가 관리합니다. 때문에 웹 페이지의 요소들을 관리하고 제어하기 위해서는 Document 객체가 웹 페이지 요소들을 잘 반영하는 자료구조를 가지고 있어야 합니다. 그래서 Document 객체 모델인 DOM은 트리 자료구조 형태를 가지고 있습니다. 트리 자료 구조는 HTML 문서를 읽어 들이고 제어하기 가장 좋은 자료구조입니다.
웹 브라우저가 HTML 문서를 읽어 들이면 위에 그림처럼 Document 객체로 시작하는 DOM 트리가 만들어집니다. 트리 자료구조에서는 트리를 구성하고 있는 객체 하나를 노드(Node)라고 부릅니다. 위 그림에서 볼 수 있는 기본적인 세 가지 노드를 먼저 정리하겠습니다.
- 문서 노드: 보라색 도형으로 표현된 제일 위에 있는 노드가 문서노드입니다. 트리의 최상위 계층이면서 전체 문서를 가리키는 Document 객체입니다. document로 참조할 수 있으며 DOM 트리로 웹 페이지를 접근하는 시작점입니다.
- 요소 노드: 파란색 도형으로 표현된 노드들이 요소 노드입니다. HTML 태그에 해당되는 요소들입니다. 요소 노드는 속성 노드와 택스트 노드를 자식으로 가질 수 있습니다.
- 텍스트 노드: 초록색 도형으로 표현된 노드들이 텍스트 노드입니다. HTML 태그 안에 있는 텍스트들이 텍스트 노드이며 이들은 요소 노드와 달리 자식 노드를 가질 수 없습니다.
트리 자료 구조에서는 기준보다 위에 있는 노드를 부모 노드라고 부르며 같은 층위에 존재하는 옆에 노드를 형제 노드라고 부릅니다. 부모 노드보다 위에 있는 노드를 조상 노드라 하고 최상위에 있는 더 이상 부모 노드가 없는 노드를 루트(뿌리)라고 합니다.
노드 객체의 프로퍼티
- parentNode: 기준 노드의 부모 노드를 참조합니다. Document 객체일 경우 부모 노드가 없음으로 null이 됩니다.
- childNode: 기준 노드의 자식 노드의 참조가 저장된 유사 배열을 참조합니다.(유사 배열은 NodeList 형태입니다.)
- firstChild: 기준 노드의 첫 번째 자식 노드를 참조합니다. 자식이 없는 노드일 경우 null이 됩니다.
- lastChild: 기준 노드의 마지막 자식 노드를 참조합니다. 마찬가지로 자식이 없는 노드일 경우 null이 됩니다.
- nextSibling: 기준 노드와 같은 부모 노드를 가진 다음 형제 노드를 참조합니다.
- previousSibling: 기준 노드와 같은 부모 노드를 가진 이전 형제 노드를 참조합니다.
- nodeType: 노드 유형을 뜻하는 숫자를 참조합니다.(요소 노드:1, 텍스트 노드: 3, Document:9)
- nodeValue: 텍스트 노드일 경우 텍스트 콘텐츠를 리턴합니다. 요소 노드는 null를 반환합니다.
노드 객체의 프로퍼티를 이용해서 조상, 부모, 자식, 형제 노드에 접근할 수 있습니다.
HTML 요소의 트리
만약 HTML 문서 안의 태그 요소에만 관심이 있다면 위에 노드 객체의 프로퍼티는 불편할 수 있습니다. 왜냐하면 트리 자료 구조 속에 텍스트 노드를 고려해야 하기 때문입니다. 그래서 DOM 트리 안의 텍스트 노드르 무시하고 HTML 문서에 요소의 계층 구조만 가져오는 프로퍼티가 있습니다.
- childNodes: 기준 노드의 자식 요소 참조를 저장한 유사 배열 객체(NodeList)입니다.
- parentElement: 기준 노드의 부모 요소 객체를 참조합니다.(텍스트 노드는 제외)
- firstElementChild: 기준 노드의 첫 번째 자식 요소 객체를 참조합니다.(마찬가지로 텍스트 노드와 공백 노드 모두 제외합니다.)
- lastElementChild: 기준 노드의 마지막 자식 요소 객체를 참조합니다.
- nextElementSibling: 기준 노드와 같은 부모를 가진 다음 형제 노드 객체를 반환합니다.
- previousElementSibling:기준 노드와 같은 부모를 가진 이전 형제 노드 객체를 반환합니다.
- childElementCount: 기준 노드의 자식 요소 개수를 반환합니다. (children.length와 같습니다.)
