[JavaScript] DOM 개념정리와 load 이벤트

DOM ?

: DOM = Document Object Model

개념 정리에 앞서, 자바스크립트는 HTML 조작에 특화된 언어이다.
그런데 자바스크립트는 어떻게 HTML을 조작할 수 있는 걸까?

그 원리는 바로,
HTML을 자바스크립트가 해석할 수 있는 문법으로 변환하면 되는 것이다!

브라우저는 HTML을 자바스크립트가 좋아하는 array 혹은 object 자료형에 담아준다

// 대충 이런 식으로...
var document = {
  div1 : {
    style : {color : 'red'}
    innerHTML : '안녕하세요'
  }
}

위 변수를 document object 즉, DOM이라고 한다.

👉 자바스크립트가 HTML에 대한 정보들(id,class,name,style,innerHTML 등)을 object 자료로 정리한것을 DOM이라고 부른다

브라우저는 HTML 문서를 위에서부터 차례대로 읽으며 DOM을 생성함

---

DOM원리를 통한 에러 방지

"이 코드는 HTML을 전부 다 읽고 실행해주세요"라는 코드를 통해 에러를 방지할 수 있다

// 이벤트 리스너 사용
$(document).ready(function(){ 실행할 코드 }); // 1번 방법(jQuery)
document.addEventListener('DOMContentLoaded', function() { 실행할 코드 }); // 2번 방법

---

load 이벤트리스너

: load라는 이벤트리스너를 사용하면 DOM 생성뿐만 아니라 이미지,css,js파일이 로드됐는지 체크 가능

(이미지 같은게 로드되면 load 이벤트가 발생하기 때문)

$(window).on('load', function(){
  //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드 
});

window.addEventListener('load', function(){
  //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드
});

ready와의 차이? ready는 DOM 생성만 체크하는 함수인데, load는 모든 파일과 이미지의 로드상태를 체크함

👉 따라서 load를 사용하면 페이지가 로드되는데 시간이 오래걸려 사용자가 기다리는 시간이 길어질 수 있다 (그래서 대부분 ready를 사용함!)