DOM load, ready

4872 단어 JavaScriptJavaScript
html을 불러오고나서 js 코드가 적용될 경우 참조를 못하므로 에러가 발생할 수 있다.
아래 코드들은 문서(DOM)가 온전히 사용할 준비가 되면 안에 있는 내용들을 실행할 수 있도록 해준다.
// 바닐라(기본) js의 경우 아래와 같이 사용하면 된다.
document.addEventListener("DOMContentLoaded", function(){
      // 내용 작성
});


// Jquery를 사용한 코드 1.
$( document ).ready(function(){
	// 내용 작성
});


// Jquery를 사용한 코드 2.
$( window ).on("load" function(){
	// 내용 작성
}
예를 들어
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" th:src="@{/js/test.js}"></script>
<title>Insert title here</title>
</head>
<body>
    <button type="button" id="testButton">버튼</button>
    ··· 내용 작성 ···
</body>
</html>

//////// 아래는 javaScript
$("#testButton").on("click", function(){
	··· 내용 작성 ···
});

위 html 예시를 보면 순서상 html이 완전히 로드 되기 이전에 js 파일을 불러와야 하는데, js 파일을 보면 html button id를 참조하고 있다.

js 파일에서는 아직 id에 해당하는 값이 무엇인지도 모르는데 참조하려고 하니 button이 정상 동작하지 못하는 경우가 발생한다.

이를 막기 위해서 맨 위에 작성한 코드들 내부에 넣어놓으면 html(DOM)이 모두 구성된 뒤에 js를 사용할 수 있도록 해준다.

혹은 </html> 태그 상단에 js 파일 경로 코드를 이동해주면 된다. 그러나 경로 등의 코드는 상단에 모아서 위치시켜 두는 것이 보기에도 바람직하다.


참고 자료 출처
$( document ).ready()

[CSS] SCSS 시작 / TIL # 23
자주 쓰는 Lombok 어노테이션 정리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage