스크립트 해석과정과 DOMContentLoaded의 상관관계
자바스크립트 공부를 할 때 다른 언어보다 더욱 매력을 느끼게 해주는 요소는 개인적으로 DOM(문서 객체 조작하기)을 활용할 때인 것 같다. 문서 객체 조작하기를 통해서 웹 문서의 다양한 태그들을 내 마음대로 이렇게 저렇게 다뤄보다보면 공부가 좀 더 재밌는 공부가 된다.
그런데 DOM을 사용하기 위해서는 DOMContentLoaded라는 이벤트를 사용해야 한다. 이것이 무엇이고 왜 사용해야 하는 것인지 정리해보고자 한다.
DOMContentLoaded
문서 객체를 조작할 때의 코드는 보통 이렇게 사용이 된다.
document.addEventListener('DOMContentLoaded', () => {
// 문서 객체 조작 문장
}위와 같이 코드를 짜는 이유는, 이렇게 짜지 않으면 오류가 나는 경우가 있기 때문이다. 예를 들어서 위 코드를 입력해 놓은 스크립트를 <head></head> 안에 위치해 놓았을 때를 생각해보자.
웹 브라우저는 HTML, CSS, JS 등의 언어로 작성된 웹 문서를 읽을 때 다음과 같은 과정을 따른다.
웹 브라우저가 스크립트를 해석하는 과정
<html>태그- 태그의 순서와 포함 관계를 확인
- 태그 분석이 끝나면
<style>태그 안에 정보를 분석 <script>태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘기고, 해석기는 스크립트 내의 코드를 해석한다- 2에서 분석한 HTML과 3에서 분석한 CSS 정보를 토대로 웹 문서를 웹 브라우저 화면에 표시한다.
- 이제 자바스크립트 코드가 화면에 표시되어 구현된다.
위와 같은 순서에 따라서 문서를 읽는다면 <script> 태그의 DOM을 사용할 때, 아직 읽어지지 않아서 생성되지 않은 태그를 조작하는 코드가 브라우저에 의해 읽히면 오류가 나게 된다.
예를 들어서 body태그 안에 h1태그를 조작하는 DOM코드를 script에 입력하고, script를 head안에 위치시킨다면 없는 태그를 조작하게 되므로 오류가 난다는 것이다.
DOMContenLoaded는 그런 일을 막아주는 역할을 한다. 웹 브라우저가 문서 객체를 모두 읽고 나면 발생되는 이벤트이기 때문이다. 따라서 이 이벤트를 활용하면 script가 어디에 위치해 있던지 문제없이 코드를 실행할 수 있다.
