문서 객체 (Document Object) : HTML 태그를 JS에서 사용할 수 있는 객체로 만든 것
DOM 계층 구조 (node tree)
HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장
-
노드 (Node) : 문서 객체를 트리의 형태로 나타냈을 때(DOM Tree) 트리의 각 요소
노드 설명 문서 노드(document node) HTML 문서 전체를 나타내는 노드임. 요소 노드(element node) 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드임. 속성 노드(attribute node) 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음. 텍스트 노드(text node) HTML 문서의 모든 텍스트는 텍스트 노드임. 주석 노드(comment node) HTML 문서의 모든 주석은 주석 노드임. - 루트 노드(root node) : 노드 트리의 최상위 노드
- 부모 노드(parent node) : 자식 노드의 상위 노드. 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드를 가짐
- 자식 노드(child node) : 부모 노드의 하위 노드
- 형제 노드(sibling node) : 같은 부모 노드를 가지는 모든 노드
- 조상 노드(ancestor node) : 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드
- 자손 노드(descendant node) : 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드
DOM을 이용해 할 수 있는 것
- 새로운 HTML 요소나 속성을 추가
- 존재하는 HTML 요소나 속성을 제거
- HTML 문서의 모든 HTML 요소를 변경
- HTML 문서의 모든 HTML 속성을 변경
- HTML 문서의 모든 CSS 스타일을 변경
- HTML 문서에 새로운 HTML 이벤트를 추가
- HTML 문서의 모든 HTML 이벤트에 반응