-
DOM이란?
이미 블로그에서 여러 차례 정리했지만, 'DOM'이란 것이 중요하다보니 다시 다루고자 한다.
'DOM'은 'Document Object Model'의 약자로 풀이하자면 문서 객체 모델이다.
웹페이지를 만들 때 3요소라는 'HTML', 'CSS', '자바스크립트'는 사실 서로 다른 개념이다.
'HTML' 문서 내에서 보통 세 가지를 모두 쓰다보니 햇갈릴 수 있지만 셋은 다른 언어다.
물론 세 언어는 서로 이용적인 측면에선 밀접한 관계를 갖는다.
그러나 셋은 다른 언어고 서로를 컨트롤하기 위해선 필요한 것 중 하나가 'DOM'이다.
'DOM'은 웹페이지에서 문서의 구성과 내용을 맡은 'HTML' 요소들을 다루기 위해 만들어졌다.
자바스크립트는 'HTML' 문서를 다뤄야하는데
이때 'HTML' 문서의 각종 요소들을 객체화 시키고 트리 구조로 구성한 것이 바로 'DOM'이다.
그리고 이때 만들어진 'tree'는 'DOM Tree'라고 한다.
즉 'DOM'은 'HTML' 문서의 요소들을 잘 구성해서 접근하기 쉽게 만든 모델이라 보면된다.
그리고 이때 'DOM'은 'HTML'의 요소에 더 접근하기 쉽게 프로퍼티와 메서드를 제공한다.
DOM 트리의 구성
'DOM' 트리는 'HTML' 문서를 객체화하여 트리 구조로 만든 것으로 네 종류의 노드로 나뉜다.
1. 문서 노드
트리의 최상위에 위치함. 각 요소, 어트리뷰트, 텍스트에 접근하려면 문서 노드를 통해야 한다.
그리고 'DOM트리'의 시작점이라 할 수 있다.
2. 요소 노드
요소 노드는 'HTML'의 요소들을 말한다.
예를 들면 <body>, <div>, <html>같은 'HTML'의 구성 요소를 말한다.
어트리뷰트, 텍스트에 접근하기 위해서는 요소 노드들을 거쳐야 한다.
모든 요소 노드는 'HTMLElement'객체를 상속하게 된다.
3. 어트리뷰트 노드
어트리뷰트는 'HTML' 요소에서 속성값을 말한다.
<a> 태그의 'href', 'target' 등을 이야기 한다.
어트리뷰트는 요소 노드의 일부러서 해당 요소 노드를 찾아 접근하여 수정이 가능하다.
4. 텍스트 노드
텍스트 노드는 'HTML'의 각 요소의 내용을 말한다.
요소에 속해서 웹페이지 상에 나오는 각종 정보들은 여기에 속한다고 할 수 있다.
텍스트 노드는 요소 노드의 자식이며 자식 노드를 가질 수 없다.
즉 텍스트 노드는 'DOM Tree'의 최종 단계 노드라 할 수 있다.
'프론트엔드 > DOM' 카테고리의 다른 글
DOM 조작 - 속성 노드의 생성, 수정, 삭제 2 (0) 2020.10.16 DOM 조작 - 속성 노드의 생성, 삭제 (0) 2020.10.16 DOM 조작 - 텍스트 노드에 대한 접근 / 수정 (0) 2020.10.13 DOM - 노드의 관계를 통한 접근 (0) 2020.10.07 DOM - 요소노드에 대한 접근 (0) 2020.10.07