DOM이라는 용어 개념정리 & load 이벤트

html 을 제어하는 js 는 html 그대로 쓰면 에러가 남.

 

<div style="color : red">안녕하세요</div>

 

이런 html 을

 

var document = {
  div1 : {
    style : {color : 'red'}
    innerHTML : '안녕하세요'
  }
}

이런식으로 object로 저장한다. 

 

정리하면 

DOM은 js가 html에 대한 정보를 (id,class,name, style 등) object 자료로 정리한것

 

브라우저는 위에서 부터 읽기 때문에 코드위치에 따른 에러가 발생 할 수 있다.

하지만 js 실행을 미루는 코드로 html을 모두 읽고 js를 실행시키는 방법도 있다. 

 

$(document).ready(fuction(){실행코드})

 

 

load 이벤트 리스너

 

DOM 생성뿐만 아니라 이미지, css, js 파일이 로드 됐는지 체크 가능

셀렉터로찾은이미지.addEventListener('load',fuction(){
	//이미지가 로드 되면 실행될 코드
})

이미지가 코드 실행전에 이미 로드 되면 이벤트 감지 못 할 수도 있음

 

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