HTML페이지내 태그는 객체로서 DOM트리에서 노드를 구성한다.
HTML페이지내 태그를 조작하려면 그에 상응하는 노드에 자바스크립트를 사용해서 접근해야 한다.
DOM에 수행하는 모든 연산은 최상위 노드인 document노드로부터 시작하며 어떤 노드에도 접근할 수 있다.
브라우저는 DOM API를 제공하며 documnet객체는 window전역객체의 프로퍼티로 DOM트리의 첫번째 노드다.
console.log(window.document);HTML파싱순서에 유의하자
브라우저는 서버로부터 받은 HTML문서를 파싱하는데 태그들을 위에서부터 아래로 읽으면서 DOM트리를 구성한다.
따라서 head태그를 파싱할때는 아직 body태그는 DOM트리에 등록되지 않은 상태다.
<html>
<head>
<script>
alert( "HEAD: " + document.body ); // null, 아직 <body>에 해당하는 노드가 생성되지 않았음
</script>
</head>
<body>
<script>
alert( "BODY: " + document.body ); // HTMLBodyElement, 지금은 노드가 존재하므로 읽을 수 있음
</script>
</body>
</html>DOM에서 null 값은 '존재하지 않음’이나 '해당하는 노드가 없음’을 의미한다.
