39장 DOM

: Document Object Model , HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조

39.1 노드

1. HTML 요소와 노드 객체

HTML 요소(HTML element) : HTML 문서를 구성하는 개별적인 요소

<div class = "greeting"> Hello </div>
<시작태그(start_tag) 어트리뷰트 이름(attribute name) = "어트리뷰트 값(attribute value)"> 콘텐츠(contents)</종료태그(end_tag)>

• HTML 요소 간에는 중첩 관계에 의해 계층적인 부자(parent-child) 관계가 형성된다.

트리 자료구조(tree data structure)

: 부모 노드(parent node)와 자식 노드(child node)로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조

루트 노드(root node) : 최상위 노드, 부모 노드가 없음
리프 노드(leaf node) : 자식 노드가 없는 노드
DOM(Document Object Model) : DOM 트리, 노드 객체들로 구성된 트리 자료구조

2. 노드 객체의 타입

노드 객체의 12가지 노드 타입 중 4가지

1. 문서 노드(document node)

• DOM 트리의 최상위에 존재하는 루트 노드로 document 객체를 의미
• 진입점 (entry point) 역할

2. 요소 노드(element node)

• HTML 요소를 가리키는 객체
• 문서의 구조를 표현

3. 어트리뷰트 노드(attribute node)

• HTML 요소의 어트리뷰트

4. 텍스트 노드(text node)

• 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드
• DOM 트리의 최종단

3. 노드 객체의 상속 구조

• DOM은 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.

39.2 요소 노드 취득

1. id를 이용한 요소 노드 취득

Document.prototype.getElementById : 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다.