[JS] 브라우저 객체 모델 BOM

[JS] 브라우저 객체 모델 BOM - 2

2021/02/17 - [Javascript/Javascript정리] - [JS] 브라우저 객체 모델 BOM - 1

location 객체

location객체는 현재 브라우저에 표시된 HTML문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용한다.

location객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL주소를 다양하게 해석하여 처리할 수 있다.

href

페이지의 URL 전체 정보를 반환한다. URL을 지정하여 페이지 이동이 가능하다.

location.href 의 형태로 작성한다.

1. document.write(location.href);와 같이 출력의 대상으로 작성한다면 해당 페이지의 정보를 반환한다.

2. location.href = "주소 또는 파일 경로"; 와 같이 저장공간으로 사용한다면 작성한 경로 페이지로 이동한다.

pathname

URL 경로 부분의 정보를 반환한다.

location.pathname 의 형태로 작성한다.

port

포트번호를 반환한다.

location.port 의 형태로 작성한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>현재 페이지 주소 정보 조회하기</title>
</head>
<body>
	<h3>버튼을 눌러 현재 페이지 주소 정보 조회하기</h3>
	<p id="text"></p>
	<button onclick="btnClick()">조회하기</button>
</body>
<script>
	function btnClick(){
		var str = "";
		str += "location.href : " + location.href+"<br>";
		str += "location.port : " + location.port+"<br>";
		str += "location.pathName : " + location.pathname; 
		
		document.getElementById("text").innerHTML = str;
	}
</script>
</html>

See the Pen yLVbKQx by Heekng (@heekng) on CodePen.

reload()

새로고침

location.reload() 의 형태로 작성한다.

assign()과 replace()

location.assign()과 location.replace()는 모두 페이지 이동 메소드이다.

A페이지 B페이지 C페이지가 있다고 생각했을 때

A페이지에서 B페이지로 이동 한 후, B페이지에서 C페이지로 이동할 때

assign()을 사용한다면 C페이지에서 뒤로가기 시 B페이지로 이동된다.

replace()를 사용한다면 B페이지의 흔적을 지우기 때문에 C페이지에서 뒤로가기 시 A페이지로 이동된다.

history 객체

history 객체는 브라우저의 히스토리 정보를 문서와 문서상태목록으로 저장하는 객체이다.

history.go(n);

history.go(n);의 n만큼 페이지를 이동한다.

n에 음수를 넣으면 이전 페이지로 이동, 양수를 넣으면 다음 페이지로 이동한다.

history.back();

이전 페이지로 이동한다.

history.goForward();

다음 페이지로 이동한다.

저작자표시 비영리 변경금지

'JS & TS > Javascipt' 카테고리의 다른 글

win-jenv 첫 오픈소스 프로젝트 (0)	2022.04.02
[JS] 브라우저 객체 모델 BOM - 1 (0)	2021.02.17
[JS] DOM 객체, 프로퍼티 (0)	2021.02.14
[JS] 객체, 프로토타입, property (0)	2021.02.13
[JS] 함수 function (0)	2021.02.12
[JS] 값 비교하기(==, ===) (0)	2021.02.12

수학하다 개발하기

[JS] 브라우저 객체 모델 BOM - 2