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 |