[자바스크립트] 들어가기전 DOM 개념잡기

[자바스크립트를 들어가기 전에 필요한 개념 - DOM 개념]

html이나, xml을 뜻하는 웹문서 혹은 문서는 같은 부분적 요소나 내용이 관련된 것 끼리 묶여서 존재하는 구조화된 문서다.

DOM은 Document Object Model의 약자로 html, xml 문서를 제어하기 위한 api이고, 문서를 구성하는 엘리먼트들을 객체화하여 제어할 수 있도록 함

문서를 구성하는 엘리먼트들을 객체화할 때도 구조적으로 객체화를 함(이것을 DOM 트리라고 하고 트리를 구성하는 요소들을 node라고 한다.)

node에는 문서를 구성하는 엘리먼트(태그), 엘리먼트의 속성(예를 들어 a의 href 속성), 태그 내부에 있는 텍스트를 노드라한다. 

쉽게 말해 엘리먼트, 텍스트 개념을 노드로 만든 것

html 문서의 요소에 접근하는 방법을 정의한 api(DOM 트리 개념 알것 )다.

DOM 객체는 문서, 텍스트, 이미지, 하이퍼링크, 폼 엘리먼트 등 각 문서의 엘리먼트(텍스트도 텍스트노드라고 표현됨)를 가져올 수 있고 처리를 할 수 있다.

DOM 객체(로 만들 수 있는 것) : 웹문서, 웹문서에 들어가있는 요소들(html 엘리먼트 - 태그, 태그 내 텍스트들)

  => 웹문서 혹은 웹문서 내의 엘리먼트들을 객체화(같은 종류지만 각각의 존재인 것)하여 제어할 수 있음

  => api : http://www.w3schools.com/jsref/dom_obj_document.asp

자바스크립트는 DOM api에 정의된 방법을 통해 DOM 객체에 접근하여 웹문서를 동적이게 만들어낸다.

웹브라우져가 엘리먼트를 어떻게 객체로 만들어내는가를 보는 방법 

  =>특정 태그에 오른쪽 마우스 클릭 -> 검사 메뉴 클릭 -> 개발자도구 이동 -> Properties 메뉴 보기 : 만들어낸 객체 계층 볼 수 있음

  => 생성된 객체를 하나씩 눌러보면 객체를 통해서 어떤 함수를 실행할 수 있는지 볼 수 있음

  => 예시) 웹문서를 객체화 한 것 : document 

  => 엘리먼트 객체 간의 상속개념도 알아야함(부모-자식 상속 관계, 부모를 계승해서 자식이 더 나은 더 많은 기술들을 구현할 수 있는 것들을 들고 있음)

결론) DOM은 웹문서를 객체로 만들어주고, 각각의 객체는 제어를 할 수 있으며 제어하여 정적이던 웹페이지를 동적으로 만들어주는 것은 자바스크립트

참고) 생활코딩 DOM : https://opentutorials.org/course/49/24