웹 DOM 구조. 다양한 형태

다큐먼트 오브젝트 모델. 이름 그대로 문서 객체 관계, 구조 정도로 이해하면 된다. 

특이한게 DOM 구조라고 설명하는데 가서 보면 제각각 3가지 형태로 설명을 한다. 여러 사이트에서 이걸 혼용해서 사용한다.

3개 다 숙지하고 차이점이 뭔지 알아야  개념이 혼동스럽지 않고 실제 코딩시나 이론 정립시 헷갈림을 피할 수 있다.

=======================================================================================

첫번째, 객체 생성과 관련된 부분으로 상속관계의 계층도이다. 

상속관계이므로 자식객체는 당연하게도 부모객체의 함수를 제 함수처럼 사용 가능하다.

보통 최상위에 노드 객체를 두고 시작한다.

엄밀히 말하면 모든 객체는 근본객체인 Object.prototype 객체부터 출발하므로 간단히 한줄로 설명하면

(Object.prototype 객체 - addEventListener, removeEventListener 등 이벤트 함수 구현한 객체) - 노드 객체 - 각종 객체들이다.

괄호친 부분은 너무 당연하거나 저 이벤트함수들은 새로 추가된 것이라서 생략하고 노드부터 실질적으로 설명하는게 많다.

살펴보듯이 각종 HTMLElement들은 document를 상속하진 않는다. 

잘 생각해보면 어디 소속을 따지는게 아니라 객체 자체의 성질, 특징과 관련된 부분이므로

다큐먼트와 각종 엘리먼트들은 그 성질이 다르므로 상속관계가 아닌게 타당하다.

=======================================================================================

 

두번째로  어느 객체의 멤버(프로퍼티)로 존재하는가 하는 관점에서의 계층도.

전역객체 윈도우(window)로부터 출발한다. 멤버(프로퍼티)이므로 점을 찍는 형식 ex) 상위객체.네임

혹은 상위객체["네임"]으로 접근가능하다.
전역객체 윈도우 아래에 다큐먼트, 로케이션, 내비게이터, 스크린, 히스토리 ,프레임s 등이 존재한다.

참고로 상위 2줄 부분을 보통 BOM이라고 한다.(브라우저 오브젝트 모델)  다큐먼트 이하 부분을 DOM이라고 함.
다큐먼트 아래에 스크립트s, 폼s, 링크s, 이미지s, 스타일s, 앵커s, 헤드, 바디 등등 존재한다.

s는  복수의 개수라는 걸 의미하고 배열 유사한 형태로 들어있다.

조심할게 다음에서 다룰 태그 구조와 다른 것임을 인지하고 구체적으로  점 찍어서 사용시 유의해야 한다.^^;

예를 들어 폼의 이름이 존재하는 경우 폼s와 별도로 다큐먼트는 폼이름으로 프로퍼티 추가 후

거기에도 폼객체를 등록(참조)한다. 따라서 document.form네임으로 접근가능하다.

body태그 안에 form태그가 있다고 해서 접근시 document.body.form네임으로 할 수 없다.

폼은 바디의 프로퍼티가 아니고 다큐먼트의 프로퍼티이기 때문이다.

이런 점 때문에 조금 혼란스러울 수 있다. 서로 다른 구조임을 유념하자.

=======================================================================================

세번째로 HTML에 표시된대로의 각 태그간의 관계.

문서에 표시된 그대로의 구조이므로  이해가 직관적이고 그냥 동의어 이해수준이다.

html 태그 아래 head, body 존재. head 밑에 meta나 title 존재. body 밑에 h1이나 form 등등 존재 이런 걸 도식화.

참고로 노드로 구성해서 이런 관계를 형성하고 노드 프로퍼티나 메소드를 통해서 각 객체에 대한 접근을 수행한다.

노드의 프로퍼티인 firstChild는 첫번째 자식, nextSibling는 다음 형제  등 이런 이름만 봐도 삘이 온다.

html 객체에 노드객체를 상속시킨 이유가 이것 때문이라고 보면 됩니다.