window 객체의 로드 완료
- window 객체 로드가 완료되는 때는?
-> HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간이 로드가 완료되는 순간
onload를 사용한 경우
1) [ 1 ] 창뜨고
2) 변경1 뜨면서 [ 2 ] 창 뜨고
3) 변경2가 출력
// onload가 아래쪽 body를 먼저 실행시켜준다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실행순서</title>
<script>
window.onload = function(){
alert(2);
var h1 = document.getElementById('h1');
console.log('h1->', typeof(h1));
h1.innerHTML = '변경2';
};
</script>
</head>
<body>
<h1 id="h1">h1 태그가 생성 되었습니다.</h1>
<script>
alert(1);
var h1 = document.getElementById('h1');
console.log('h1!!!!!!->', typeof(h1));
h1.innerHTML = '변경1';
</script>
</body></html>
onload를 사용하지 않은 경우
1) [ 2 ] 창 뜨고
2) [ 1 ] 창 뜨고
3) 변경1
// 위에서부터 순서대로 실행된다
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실행순서</title>
<script>
// window.onload = function(){
alert(2);
var h1 = document.getElementById('h1');
console.log('h1->', typeof(h1));
h1.innerHTML = '변경2';
// };
</script>
</head>
<body>
<h1 id="h1">h1 태그가 생성 되었습니다.</h1>
<script>
alert(1);
var h1 = document.getElementById('h1');
console.log('h1!!!!!!->', typeof(h1));
h1.innerHTML = '변경1';
</script>
</body></html>
onload가 없어서 h1을 불러오지 못해서(?) 에러남!
'front-end > Javascript & jquery' 카테고리의 다른 글
| [자바스크립트] 문서객체의 스타일 조작 (0) | 2020.11.30 |
|---|---|
| [자바스크립트] 문서 객체 가져오기 / getElementById / querySelector (0) | 2020.11.30 |
| [자바스크립트] 문서객체 만들기 / createElement / createTextNode (0) | 2020.11.30 |
| [자바스크립트] 윈도우 객체 (0) | 2020.11.30 |
| [자바스크립트] json /제이슨 (0) | 2020.11.27 |
| [자바스크립트] 객체와 배열 (0) | 2020.11.27 |
| [자바스크립트] 함수 / settimeout / setinterval (0) | 2020.11.27 |