Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS 문서로딩 (load, DOMContentLoaded) 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 문서로딩 (load, DOMContentLoaded)

호IT 2021. 2. 10. 04:06

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

 

 

 

 

 

 

- 문서 로딩

 

 

웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 합니다.

 

 

이것을 알려주는 이벤트가 load 와 DOMContentLoaded 입니다.

 

 

 

<html>
    <head>
        <script>
        var t = document.getElementById('target');
        console.log(t);
        </script>
    </head>
    <body>
        <p id="target">Hello</p>
    </body>
</html>

 

 

 

 

 

<p id="target">Hello</p>가 로딩되기 전에 자바스크립트가 실행되었기 때문에 null이 출력됩니다.

 

해결하기 위한 방법 중 하나는 아래 코드와 같이 스크립트를 문서가 로드 된 후에 위치시키면 됩니다.

 

<html>
    <head>
    </head>
    <body>
        <p id="target">Hello</p>
<script>
    var t = document.getElementById('target');
    console.log(t);
</script>
    </body>
</html>

 

 

 

 

결과가 제대로 출력되는 것을 확인할 수 있습니다.

 

 

 

 

 

- load

 

다른 방법으로 load 이벤트를 사용하면됩니다.

 

<head>
    <script>
        window.addEventListener('load', function(){
            var t = document.getElementById('target');
            console.log(t);
        })
    </script>
</head>
<body>
    <p id="target">Hello</p>
</body>

 

 

 

window 전역객체에 load 되었을 때 이벤트를 추가합니다.

 

 

load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행됩니다.

 

하지만

이건 에플리케이션의 구동이 지연되는 부작용을 초래합니다.

 

 

 

 

- load DOMContentLoaded

 

 

DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에

이미지 다운로드를 기다릴 필요가 없습니다.

 

 

 

 

 

<html>
    <head>
        <script>
            window.addEventListener('load', function(){
                console.log('load');
            })
            window.addEventListener('DOMContentLoaded', function(){
                console.log('DOMContentLoaded');
            })
        </script>
    </head>
    <body>
        <p id="target">Hello</p>
    </body>
</html>

 

 

 

 

DOMContentLoaded 가 load 보다 먼저 출력되는 것을 알 수 있습니다.

 

 

 

 

 

 

DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원하고 있습니다.

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS jQuery 이벤트 (on API,이벤트 제거 , late binding selector, 다중 바인딩)  (0) 2021.02.10
[ JavaScript ] JS 마우스이벤트  (0) 2021.02.10
[ JavaScript ] JS from 태그 이벤트 (blur, focus,change)  (0) 2021.02.10
[ JavaScript ] JS 캡처링(Capturing), 버블링(Bubbling)  (0) 2021.02.10
[ JavaScript ] JS 이벤트 ( inline , 프로퍼티 리스너 , addEventListener)  (0) 2021.02.10
'SUA 정보보안/JavaScript' Related Articles more
Comments