DOM 트리

• HTML/XML 문서는 브라우저 안에서 DOM을 태그 트리 구조로 표현됨

• DOM 에서 모든 HTML 태그는 객체.

• 중첩 태그란 태그 하나가 감싸고 있는 ‘자식’ 태그

• 모든 객체는 JS 통해 접근

• 노드란 DOM 트리를 구성하는 최소한의 단위이며 기본 요소

• 태그는 요소 노드이고 트리 구조 구성

• 문자는 텍스트 노드가 됨

• 공백, 새 줄 또한 텍스트 노드화 됨

• 텍스트 노드 생성의 예외로 head태그 이전의 공백과 새 줄은 무시되며 HTML 명세서에는 모든 컨텐츠는 body 안쪽에 있어야 하므로 body태그 뒤에 무언가 넣더라도 그 컨텐츠는 body 안쪽으로 옮겨짐. 따라서 body 뒤엔 공백 올 수 없음

• HTML 내의 모든 것(주석 포함)은 DOM으로 구성.

• 브라우저는 자동 교정으로 기형적 HTML(닫힌 태그가 없는 태그 등) 교정

• 개발자 도구로 DOM 검사하고 바로 수정 가능

• Chrome 개발자 도구 문서 사이트에서 다양한 기능 볼 수 있음

• 툴을 배울 떄 가장 좋은 방법은 이리저리 클릭해보고 메뉴 직접 열어보고 다양한 옵션 확인 한 뒤 손에 익으면 문서 정독해 부족한 나머지 부분 채우기.