HTML은 태그(tag)로 구성되며 태그의 본질은 객체다.
태그하나가 감싸고 있는 ‘자식’태그는 중첩태그(nested tag)라고 부르며 태그내의 텍스트 역시 객체다.
HTML문서내 객체들은 자바스크립트로 접근할 수 있으며 페이지를 조작하려면 이 객체를 사용하게 된다.
document.body.style.background = 'red';DOM 예제
<!DOCTYPE HTML>
<html>
<head>
<title>사슴에 관하여</title>
</head>
<body>
사슴에 관한 진실.
</body>
</html>
그림의 네모칸들이 객체를 나타내며 노란색객체를 보면 텍스트뿐만아니라 빈칸, 줄넘김도 하나의 객체를 나타낸다.
이것은 시작태그와 자식시작태그와의 사이에 존재하는 빈칸과 줄넘김도 하나의 텍스트객체가 된다는 것이다.
노드 : DOM트리를 구성하는 객체들
요소노드 : 하늘색으로 태그객체
텍스트노드 : 노란색으로 텍스트 또는 빈칸, 줄넘김
텍스트노드의 특징
1. 자식노드를 가질 수 없다.
2. 역사적인 이유로, <head> 이전의 공백과 새줄은 무시된다.
- 태그사이의 빈칸과 줄넘김이 엄연한 객체로서 DOM트리를 구성하지만 중요한 의미를 가지지 않기때문에 개발자도구에서 이것들은 보이지 않는다. *
DOM 명세서에선 테이블에 반드시 < tbody >가 있어야 한다고 못 박아 놓았지만, HTML에선 < tbody >를 생략하곤 한다. 이때, 브라우저는 자동으로 DOM에 < tbody >를 만들어 준다.
노드의 개념
HTML문서내에 있는 모든 것은 객체로서 DOM트리를 구성하는 노드가 된다. 즉 태그와 텍스트, 빈칸, 줄넘김 모든 것이 노드가 되는 것이다.
HTML문서 전체를 나타내는 document객체 또한 DOM노드다.
그래서 document객체로부터 시작하여 모든 노드들이 자바스크립트로 document객체로부터 접근이 가능하다.
노드타입은 총 열두가지 인데, 실무에선 주로 다음 네가지 노드를 다룬다.
- DOM의 '진입점"이 되는 문서노드(document node)
- HTML 태그에서 만들어지는 요소노드(element node)
- 텍스트, 빈칸, 줄넘김의 텍스트노드(text node)
- 주석노드(comment node)
