<p id='test'>HELLO</p>body 태그의 코드는 위와 같다.
<head>
<script>
var a = document.getElementById('test');
console.log(a);
</script>
</head>head 태그 안에 위와 같이 자바스크립트 코드를 작성 후 웹페이지를 확인해보면,
null 값이 나온다.
이유는,
head 태그안의 script에서 test라는 id의 엘리먼트를 찾는 시점에서는 해당 엘리먼트가 만들어져있지 않은 상태로 인지되기 때문에 null 값이 나오는 것이다.
위와 같은 문제가 원인이라고 한다면,
제어하고자 하는 엘리먼트들이 다 만들어진 후 맨 마지막에 script 코드를 작성하면 되지만 다른 방법을 이용해서 head 태그 내에 자바스크립트를 사용하는 방법도 있다.
웹 페이지 전체를 대표하는 전역객체인 window 객체의 onload 메소드를 이용하는 것이다.
onload는,
모든 웹 페이지의 구성요소들의 렌더링이 끝난 후 제일 마지막에 onload 라는 이벤트가 실행이 된다.
따라서 다음과 같이 head태그 안에 onload 를 이용해서 스크립트 코드를 작성을 해주면
<script>
window.onload = function(){
var a = document.getElementById('test');
console.log(a);
}
</script>
찾고자 하는 test라는 id의 엘리먼트가 콘솔창에 잘 출력되는 것을 확인할 수 있다.
또한 addEventListener의 load를 이용해서 사용할 수도 있다.
(window.onload와 같은 의미)
<script>
window.addEventListener('load', function(){
var a = document.getElementById('test');
console.log(a);
})
</script>
onload는 앞서 언급했다시피 모든 구성요소들의 렌더링이 끝난 후 제일 마지막에 호출이 된다.
어떠한 이미지를 다운로드 한다던지 다른 구성요소들을 불러오는 작업에 대해 Delay가 되면 onload 이벤트 역시 지연된다.
이 때 사용할 수 있는 방법이 DOMContentLoaded 라는 이벤트이다.
이 이벤트는 이미지 등이 다운로드 되지 않아도 DOM에 있는 컨텐츠들이 로딩되면 그 다음 발생이 된다.
정리하자면,
onload는 외부자원과 이미지, 텍스트, 영상 등의 파일들이 모두 로딩된 후 발생되고
DOMContentLoaded는 단순 DOM이 모두 로딩되면 발생이 되는 것이다.
따라서 속도측면에서는 onload보다 DOMContentLoaded가 더 빠르다.
'Javascript' 카테고리의 다른 글
| 22. Ajax (0) | 2021.10.08 |
|---|---|
| 21. jquery (0) | 2021.10.06 |
| 19. 이벤트 기본동작 취소 (0) | 2021.09.29 |
| 18. 이벤트 전파(버블링/캡처링) (0) | 2021.09.28 |
| 17. 이벤트 (0) | 2021.09.27 |