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()
지식 쌓기