HTML을 지탱하는 것은 태그 (tag) 입니다.
DOM에 따르면, 모든 HTML 태그는 객체입니다. 태그 하나가 감싸고 있는 '자식' 태그는 중첩 태그(nested tag)라고 부릅니다. 태그 내의 문자(text) 역시 객체 입니다.
모든 객체는 자바스크립트를 통해 접근할 수 있고, 페이지를 조작할 때 document 명령어를 사용합니다.
DOM 구조에 대한 이해가 필요합니다.
트리에 있는 모든 노드는 객체입니다.
태그는 요소 노드(element node)이고, 트리 구조를 구성합니다.
<html> 은 루트 노드가 됩니다. <head>, <body>는 루트 노드의 자식 노드가 됩니다.
요소 내의 문자는 텍스트(text) 노드가 됩니다. 텍스트 노드는 자식 노드를 가질 수 없고, Leaf Node가 됩니다.
텍스트 노드의 예외 사항
<head>에서는 공백과 새줄이 무시됩니다.<body> </body>사이에 있어야 합니다.
자동 교정
DOM 생성 과정에서 HTML 이 최상단에 없을 경우 자동으로 넣어주게 됩니다. (최상단에)
이 외 <head>, <body>가 없는 경우에도 자동으로 생성 됩니다.
주석도 노드가 될 수 있습니다.
주석은 화면 출력에 영향을 주지 않습니다.
실무에서 사용하는 주요 노드 4가지
- DOM 의 진입점 document
- DOM 트리를 구성하는 블록 요소 element node
- 텍스트를 포함하는 텍스트 노드 text node
- 화면에 보이지는 않지만 정보를 기록하는 주석(comment)노드
메일은 매일 확인하고 있습니다. 궁금하신 부분이나 틀린 부분에 대한 지적사항이 있으시다면 언제든 편하게 연락 부탁드려요 :)