이클립스에서 작성한 html 코드와 개발자 도구로 보는 코드가 있다
이 코드를 톰캣을 실행하여 웹페이지 화면에서 개발자 도구 에서 엘리먼트 메뉴탭을 들어가면 보이는 코드들은 Object다
브라우저로 보는 코드들은 이클립스에서 작성한 html코드들과 다르다
엘리먼트로 보는 저 코드들은 html 태그 예를들어 div태그를 브라우저가 해석해서 1대1로 파싱을 한 후 Object로 내린 것이다
개발자 도구로 보는 코드 한줄한줄이 dom(documentObjectModel의 약자) document Object(객체)라고 한다
다시한번 되새기자면 객체는 메모리안에 모든것 이라고 요약하여 정의 할 수 있다
Dom의 객체는 트리구조로 되어 있다
그것을 dom트리 (도큐먼트트리)라고 한다
해당 구성으로 되어 있다 우리가 늘상 보고있는 웹페이지의 구조이다
document ObjectModel의 역할(dom의 가장 큰 역할)
문서에 대한 구조, 스타일, 내용들을 변경 할 수 있게 도와준다
노드
이 구조의 모든 것들이 노드 이다
*노드는 태그보다 더 큰 개념이다
우리들이 크롬에서 F12버튼을 눌러 엘리먼트탭에서 보이는 모든 것들을 노드라고 표현 할 수 있다
-노드의 큰 3가지 구성
주석노드, 엘리먼트노드, 텍스트노드로 구성되어 있다
주석노드와 텍스트노드를 제외한 나머지 모든 것들을 엘리먼트노드 라고 부른다
*엘리먼트노드는 html, xml크게 2가지밖에 없다
엘리먼트노드는 xml파일의 코드에서도 확인 할 수 있다
Dispatcher-servlet.xml에있는 코드들도 노드이고 엘리먼트다
(Xml을 읽어 드릴때 브라우저를 읽어주기때문)
앞서 말했듯이 엘리먼트 노드는 html노드와 xml노드 크게 2가지로 나뉘는대
*Html에 있는 엘리먼트를 html엘리먼트노드 라고 부른다
Xml에 있는걸 xml엘리먼트노드 라고 부른다
웹페이지에 파싱이되는 언어는 어떻게 불리는지, 내가 마크업을 하는 언어 html을 쓰고 코딩을 하면서 test할때 개발자도구를 보는 화면이 어떻게 불리는지 어떠한 개념이 있는지 기본개념을 숙지하고 사용하도록 하자
