[Javascript] 자바스크립트 브라우저 객체 모델 - Location 객체

브라우저 객체 모델(BOM)이란?

• 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
• 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.

 

Location 객체란?

• location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나 브라우저에 새 문서를 불러올 때 사용할 수 있다.
• Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있다.

 

Location 메소드

현재 문서의 URL 주소

• location 객체의 href 프로퍼티는 현재 문서의 전체 URL 주소를 문자열로 반환한다.

document.write("현재 문서의 주소는 " + location.href + "입니다.");

현재 문서의 호스트 이름

• location 객체의 hostname 프로퍼티는 현재 문서의 인터넷 호스트 이름을 반환한다.
• host, hostname, port, hash와 같은 location 객체의 주요 프로퍼티는 URL 주소의 다양한 특성을 저장하고 있으며, 이와 같은 프로퍼티는 Link 객체를 통해서도 제공된다.

document.write("현재 문서의 호스트 이름은 " + location.hostname + "입니다.");

현재 문서의 파일 경로명

• location 객체의 pathname 프로퍼티는 현재 문서의 파일 경로명을 반환한다.
• 호스트 이름(host name)과 파일 경로명(path name)을 합쳐 URL(Uniform Resource Locator)이라고 부르며, 이러한 URL은 브라우저가 웹 서버로 컨텐츠를 요청할 때 해당 컨텐츠가 어디에 있는지를 알려주기 위한 규약이다.

document.write("현재 문서의 파일 경로명은 " + location.pathname + "입니다.");

현재 창에 문서 불러오기

• location 객체의 assign() 메소드는 브라우저 창에 지정된 URL 주소에 존재하는 문서를 불러오는 반면에, replace() 메소드는 새 문서를 불러오기 전에 현재 문서를 브라우저의 히스토리에서 제거한다는 점이 assign() 메소드와 다르다.
• location 객체의 reload() 메소드는 브라우저 창에 현재 문서를 다시 불러오며, 현재 문서를 브라우저의 히스토리에서 제거한다는 의미는 브라우저의 뒤로 가기 버튼을 눌러도 이전 페이지로 다시 돌아갈 수 없다는 의미다.

function openDocument() {
    location.assign("/index.php");
}

function openDocumentWithReplace() {
    location.replace("/index.php");
}

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/