(50) [JavaScript] 6일 JavaScript 객체

💻/Javascript

(50) [JavaScript] 6일 JavaScript 객체 - DOM

따궈 2024. 4. 28. 12:34

문서 객체 모델(Document Object Model)이해
웹 페이지 콘첸츠를 조작하는 메소드와 인터페이스를 제공한다.
DOM은 HTML문서의 모든 요소에 접근하는 방법을 정의한 API다.
DOM은 전체 페이지를 노드 계층 구조로 변환하며, HTML 페이지의 각 부분은 각기 다른 데이터를
포함하는 다양한 타입의 노드로 표현된다.

</head>
<body>

	<h3>document 객체</h3>

	<form name="myForm">
		<p>
			이름 : <input type="text" name="name" >
		</p>
		<p>
			생일 : <input type="text" name="birth">
		</p>
		<p>
			나이 : <input type="text" name="age" id="age">
		</p>
		<p>
			<button type="button" onclick="result()">확인</button>
		</p>
	</form>
	<hr>
	<div class="Layout"></div>

	<script type="text/javascript">
		function result() {
			//폼 접근 1. 배열 접근 2. 폼 이름으로 접근 
			//const f= document.forms //'s'는 배열 개념, 모든 폼을 가져옴
			const f = document.myForm; // 폼 이름으로 접근 (이름은 똑같은 것이 있으면 안됨)
			
			//form을 이용하여 form 아래의 입력 
			let name = f.name.value;
			
			//getElementsByName() 함수를 이용하여 name 속성으로 접근
			let birth = document.getElementsByName('birth')[0].value;
			
			//getElementsByID() 함수를 이용하여 id 속성으로 접근
			let age = document.getElementById('age').value;
			
			let s = `이름:${name},생년월일:${birth},나이:${age}`;
			
			//선택자로 접근
			//let divEL = document.querySelectorAll('.layout')[0];
			let divEL = document.querySelector('.layout');
			divEL.innerHTML=s;
			

		}
	</script>

</body>
</html>

<style type="text/css">
.container{
	background:#fff; width: 100% ; display : flex;
	justify-content:center; align-items:center;
}
</style>

</head>
<body>

<h3>전체 화면</h3>

<div class ="container">
	<button type="button" class="btnFullscreen">전체 화면</button>
	<button type="button" class="btnExitFullscreen">전체화면취소</button>
</div>

<script type="text/javascript">
const btnEnterFull=document.querySelector('.btnFullscreen');
const btnExitFull=document.querySelector('.btnExitFullscreen');

const container = document.querySelector('.container');

//버튼에 대한 click 이벤트 등록
btnEnterFull.addEventListener('click',e=>{
	container.requestFullscreen();
});

btnEnterFull.addEventListener('click',e=>{
	document.exitFullscreen();
});





</script>

</body>
</html>

</head>
<body>

	<h3>location 객체</h3>
	
	<!-- 
		현재 브라우저에 표시된 HTML 문서의 주소를 열거나 
		브라우저에 새문서를 불러올때 사용
	 -->
	 
	 
	 <p> <button type ="button" onclick="fun();">네이버</button></p>
	 <p> <button type ="button" onclick="fun2();">구글</button></p>
	 <p> <button type ="button" onclick="location.href('https://www.daum.net/')">다음</button> </p>
	 
	 <script type="text/javascript">
	 function fun() {
		 //이전 페이지로 돌아갈수 있다. 
		location.href='https://naver.com';
	}
	 
	 function fun2() {
		 //이전페이지로 돌아갈수없다. 새로운 페이지를 불러오기전에 히스토리 제거 
		location.replace('https://google.com');
	}
	
	 
	 </script>

</body>
</html>

</head>
<body>

	<h3>navigator</h3>
	<!-- 브라우저 공급자 및 버전 정보등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체  -->
	
	<script type="text/javascript">
	let a = navigator.userAgent;
	let b = navigator.language;
	
	console.log('userAgent:',a);
	console.log('language:',b);
    
	</script>
    
</body>
</html>

</head>
<body>

	<div>
		<p><a href="javascript:winOpen();">열기</a></p>
		<p><a href="javascript:winClose();">닫기</a></p>
	</div>
	
	<script type="text/javascript">
	
	var win = null;
	
	function winOpen() {
		let flag;
		let url='https://www.naver.com';
		
		flag='left=10, top=10, width=700,height=500';
		
		win = window.open(url,'test',flag);
	}
	
	function winClose() {
		if(win){
			win.close();
		}
		 win=null;
	}
	</script>
	
</body>
</html>

</head>
<body>


<div>

	<form name="myForm">
	<p><input type="text" name="name" placeholder="이름을 입력하세요"></p>
	<p>
		<input type="text" name="zip" readonly placeholder="우편번호">
		<button type ="button" onclick="zipOpen();">우편번호</button>
		<input type="text" name="addr1" style="width:250px;" readonly placeholder="기본주소"><br>
		<input type="text" name="addr2" style="width:250px;" placeholder="상세주소">
	</p> 
	<p>
	<button type="button">확인</button>
	</p>
	</form>
</div>

<script type="text/javascript">
function zipOpen() {
	let flag;
	let url = 'zipFind.html';
	
	flag='left=30, top=30,width=700, height=500';
	window.open(url,'zip',flag);
	
}


</script>

</body>
</html>

</head>
<body>

	<div class="Layout"
		style="width: 300px; height: 300px; border: 3px dotted blue; margin: 30px auto;"></div>
	<p style="text-align: center;">
		<button type="button" onclick="result()">배경색 변경</button>
	</p>

	<script type="text/javascript">
		function result() {
			let url = 'colorWin.html';
			let flag = 'top=30,left=30, width=250, height=100';
			window.open(url, 'test', flag);
		}
	</script>


</body>
</html>