<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM, BOM 객체</title>
<style type="text/css">
button {
color: white;
background-color: green;
padding: 5px;
}
</style>
</head>
<body>
<!--
DOM : Document Object Model
웹 즈라우저에 로딩되는 페이지 == 객체
DOM 구성에서는 일반 텍스트도 하나의 요소로 판단함!
-> textNode
BOM : Browser Object Model
브라우저 마다 다르기 때문에 오피셜이 되기 어려움
window : open(), close()
location history navigator screen document
URL정보 방문기록 브라우저 자체 상태 브라우져 제공 화면
.href back(), forward()
-->
<button type="button" onclick="makeNewButton()">새로운 버튼 만들기</button>
<script type="text/javascript">
function makeNewButton() {
var btn = document.createElement('button');
btn.onclick = function() {
alert('내가 만든 버튼 클릭 이벤트 동작함!');
}
var txt = document.createTextNode('새로운 버튼');
btn.appendChild(txt);
document.body.appendChild(btn);
}
</script>
<a href='bomHistory.html'>페이지 이동하기</a> <!-- BOM history -->
</body>
</html>
