[JavaScript] 05. 브라우저 객체 모델(BOM) -개요/Window 객체/Document 객체

브라우저 객체 모델(Browser Object Model)

브라우저와 상호작용하는 메소드와 인터페이스를 제공

웹 브라우저와 관련된 객체의 집합

window, location, navigator, history, screen, document

브라우저 및 HTML 내용과 관련된 객체

브라우저 객체 모델(Browser Object Model, BOM)

window 객체

window-팝업

사용 권장 X

팝업창 열고 닫는 html 코드

<div> 태그를 활용하여 팝업창 역할을 하는 코드를 만들 수 있다. (script 작업이 꽤나 어렵다ㅠㅠ)

<body>
	<h3>window - 팝업</h3>

	<div>
		<p>
			<a href="javascript:openWin()">팝업열기</a>
		</p>
		<p>
			<a href="javascript:closeWin()">팝업닫기</a>
		</p>

	</div>

	<script type="text/javascript">
		var win = null;
		function openWin() {

			let f;
			let url = "https://naver.com";

			f = "left=10, top= 10, width=700; height=500";
			win = window.open(url,"test",f);

		}

		function closeWin() {

			if (win) {
				win.close();
			}
			win = null;
		}
	</script>
</body>

document 객체

html 태그 안의 body 영역

window 객체의 document 속성은 불러온 웹 페이지를 나타는 document 객체

페이지 콘텐츠(DOM 트리)의 진입점 역할 수행

document 객체 주요 속성

document 객체 주요 메소드

document 객체 주요 메소드 사용 예시

getElementsByName() name 속성 접근

let birth = document.getElementsByName("birth")[0].value;

getElementById() 메소드 id 속성으로 접근

let age = document.getElementById("age").value;

class 속성 값으로 접근

const objBox = document.getElementsByClassName(".layout")[0];

선택자로 접근

const objBox = document.querySelector(".layout"); // 선택자는 . 을 부ㅜㅌ여야 함

'💻Programming > 🏃‍♀️JavaScript' 카테고리의 다른 글

[JavaScript] 브라우저 객체 모델(BOM) - (0)	2022.09.22
[JavaScript] 05. 브라우저 객체 모델(BOM) - location 객체/navigator 객체 (0)	2022.09.22
[JavaScript] 내장 객체 - Array (1)	2022.09.22
[JavaScript] JSON (0)	2022.09.22
[JavaScript] 04. 내장객체 추가해야됨.. (0)	2022.09.22