코딩/JavaScript

JavaScript window.onload를 사용하는 이유

모두와 함께 2020. 6. 26. 01:23

자바스크립트에서는 작성한 위치가 어딘지에 따라 제대로 출력되지 않는 경우가 있습니다.

그 중 선택자인 document.getElementById(); 을 예를들어 설명하겠습니다.

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script>
        var test = document.getElementById('user');
        test.style.color= "red";
    </script>
</head>
<body>
    <p id = 'user'>test</p>
</body>
</html>

p태그의 id : user를 생성하기전에 이미 실행을 하기 때문에 오류가 발생합니다.

 

오류메세지↓

위의 에러메세지처럼 작성위치의 문제때문에 오류가 발생하는건데, 해결방법은 p태그의 아래에서 script를 설정하는 방법과 window.onload. 두가지 방법입니다.

이번 글에서는 window.onload에 대해 알아보겠습니다.

 

window.onload

보통 로드가 된 시점에 발동하는 window.onload는 위치에 상관없습니다.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script>
        window.onload = function() {
            var test = document.getElementById('user');
            test.style.color= "red";
        };
    </script>
</head>
<body>
    <p id = 'user'>test</p>
</body>
</html>

window.onload를 함수 설정을 하면 위의 코드처럼 위치에 상관없이 p태그가 로드를 할 때 발동되는 원리입니다.