> 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 파일 포함 전부 로드가 되었을 경우 실행할 코드
})
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeans-dev-book.gitbook.io/docs/lecture/javascript/document-ready.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.