[jQuery] $(document).ready()란? - DOM 순서

[jQuery] document.ready() - DOM 순서

우리가 jquery를 쓸때 제일 처음에 써주는 $(document).ready(function(){});

이것은 $(function(){}); 이렇게 줄여서 사용할 수 있습니다.

이 그림을 먼저 보시죠

위에서 아래로 내려오는 순서입니다.

브라우저가 웹문서를 읽기 시작하면

DOM이 생성됩니다.

여기서 DOM이란,

Document Object Model - 문서 객체 모델

문서는 HTML과 XML과 같은 것들을 문서라 하고

이러한 문서를 구조적으로 표현하는 방식을 제공하는 것이 DOM이라고 합니다.

w3school에서 제공하는 HTML DOM Tree 구조를 보면

출처 : https://www.w3schools.com/js/js_htmldom.asp

이와 같이 생겼습니다. 

태그와 속성으로 구성되어있는 구조.

w3school 에서는 HTML DOM을 이렇게 설명하는군요

• 객체 로서의 HTML 요소
• 모든 HTML 요소 의 속성
• 모든 HTML 요소에 액세스 하는 메소드
• 이벤트 의 모든 HTML 요소

즉, 맨 위에 사진과 같이 DOM(HTML이나 XML문서)이 생성이 되면 우리가 작성했던 $(document).ready(function( ~~~~ 라는 놈이 동작하게 됩니다.

그러면 구조는 완성이 되었고 구조가 완성되면 그 위에 이미지가 올라가야겠죠?

이미지가 로드되면 페이지 로딩은 완료되고 $(window).load(function( ~~~  라는 놈이 동작하게 됩니다.

동작순서는

1. $(document).ready(function(

2. $(window).load(function(

제가 프로젝트를 하면서

체크박스 전체해제 기능을 구현하는데

$(document).ready 안에다 쓰지 않고 밖에다 썻더니 동작하지 않았습니다.