> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/javascript/document-ready.md).

# document ready

예를 들어 이런 코드가 있다고 해 봅시다.

```html
<script>
  document.getElementById('test').innerHTML = '안녕'
</script>

<p id="test">임시글자</p>
```

당연히 오류 발생함.

코드를 위에서 부터 읽어 오는데&#x20;

아래처럼 document라는 object안에 html을 정리해서 가지고 있는다

이렇게 해야 우리가 보통 사용했던 document.어쩌구&#x20;

이런걸 사용할 수 있음

```javascript
var document = {
  p : {
    id : 'test'
    innerHTML : '임시'
  }
}
```

그래서 자바스크립트 실행을 나중으로 미루는 방법이 있는데 이렇게 쓴다.

```javascript
$(document).ready(function(){ 
   실행할 코드 
})
document.addEventListener('DOMContentLoaded', function() {
   실행할 코드
})
```

이렇게 하고 js를 body 상단에 작성하는 경우가 많았는데

요즘은 위 코드를  안쓰고 body 하단에 작성하는 경우도 많음

#### load 이벤트 리스너

위 document.ready와 비슷하게 dom 생성뿐만 아니라 css, js 파일이 로드 됐는지도 체크가 가능함.

```javascript
$('image').addEventListner('load', function(){
    //이미지 로드 후 실행할 코드
})


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

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