문서 객체란

JavaScript를 학습하면서 객체에 대해서도 많이 접했고 DOM에 대해서도 많이 들었지만 트리구조, HTML과 비슷하지만 HTML은 아니다 등등 정확한 의미에 대해서는 모르고 그냥 두루뭉술한 개념으로 받아들었었다. 하지만, JavaScript로 문서객체의 선택과 조작을 다뤄야 함으로 내용을 정리해보았다.

먼저, 문서 객체란 HTML태그를 JavaScript에서 이용할 수 있게 객체로 만든 것을 말한다. 따라서 이를 이용하면 index.js에서 index.html에 태그를 생성하거나 제거할수도 있고, 심지어 조작하거나 이벤트등에 반응할 수도 있다. 따라서, 문서 객체를 조작한다는 말은 결국 태그를 조작한다는 의미이다.

웹 브라우저는 HTML페이지를 읽을때 태그의 포함 관계에 따라 아래와 같이 문서 객체를 트리형태로 만든다고 한다.

그래서 가장 먼저 HTML파일을 분석한 후 화면에 표시하게 된다. 이렇게 웹 페이지를 처음 실행할때 HTML 태그로 적힌 문서 객체를 생성하는 것을 정적 생성이라고 하고, 웹페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것을 동적 생성이라고한다.
그리고, 이렇게 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식을 DOM(Document Object Model)이라고 한다.

웹 페이지 실행 순서

문서 객체를 잘 사용하려면 먼저 웹브라우저가 어떤 순서로 페이지를 실행하는지 이해해야한다고 한다. 먼저 위에 그림은 실행 순서에 따른 문서 객체 사용의 오류인데 head 태그내에 h1의 배경 색상을 빨간색으로 변경하는 문서 객체 조작을 실행하였지만 오류가 발생하였다. 그 이유는 웹 브라우저는 HTML코드를 읽을때 위쪽에서 아래쪽으로 실행하기 때문에
1. script태그안에 객체 조작부분을 먼저 읽고
2. 객체 조작을 위해 h1태그를 찾았으나 생성되지 않았고
3. 그 뒤에 h1태그의 내용을 읽었기 때문에 오류가 난것이다.
따라서 script 태그의 위치는 웹페이지를 실행하자마자 빠르게 요소들을 표시하기 위해 body태그 최하단에 위치하는것이 좋다