[JavaScript] script 작성 위치 정리 2

AI Bootcamp/JavaScript

[JavaScript] script 작성 위치 정리 2

딥런 2022. 1. 29. 01:57

See the Pen JavaScriptBasic2 by DevYJShin (@devyjshin) on CodePen.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	window.onload=function(){
		console.log("head 태그 안에서 p태그: ", document.getElementById("userid")); // 접근하는 방법
	};
</script>

</head>
<body>
	<script type="text/javascript">
		// 자바 스크립트 코드 작성 
		// 인터 프리터 - 순차적 실행 
		// DOM 생성 후 접근 가능
		console.log("body 태그 안에서 p태그 위: ", document.getElementById("userid")); // 접근하는 방법
	</script>

	<p id="userid">홍길동</p>


	<script type="text/javascript">
		// 자바 스크립트 코드 작성
		console.log("body 태그 안에서 p태그 밑: ", document.getElementById("userid")); // 접근하는 방법
	</script>
</body>
</html>

window.onload = 함수
→ 실행 시점은 HTML DOM TREE가 모두 실행된 후에 실행된다.
HTML DOM TREE가 모두 실행 : body 안의 모든 태그가 실행