브라우저 객체 모델(BOM) 이해하기: Location 객체
웹 개발을 하다 보면 브라우저 객체 모델(Browser Object Model, BOM)의 여러 가지 객체를 사용해야 할 때가 있습니다. 이번 글에서는 BOM의 중요한 구성 요소 중 하나인 Location 객체에 대해 알아보겠습니다. Location 객체는 웹 페이지의 URL 정보를 다루는 데 사용되며 이를 통해 현재 웹 페이지의 URL을 확인과 변경 및 페이지 새로 고침 등을 수행할 수 있습니다.
▼ 브라우저 객체 모델의 계층 구조

1. Location 객체의 주요 속성과 메서드
▼ Location 객체의 주요 속성과 메서드
속성/메서드 | 설명 |
---|---|
속성 | |
href | 현재 URL 전체를 가져오거나 설정합니다. |
protocol | URL의 프로토콜(http:, https: 등)을 가져오거나 설정합니다. |
host | URL의 호스트 이름과 포트 번호를 가져오거나 설정합니다. |
hostname | URL의 호스트 이름을 가져오거나 설정합니다. |
port | URL의 포트 번호를 가져오거나 설정합니다. |
pathname | URL의 경로 이름을 가져오거나 설정합니다. |
search | URL의 쿼리 문자열을 가져오거나 설정합니다. |
hash | URL의 해시(# 뒤에 있는 문자열)을 가져오거나 설정합니다. |
메서드 | |
assign(url) | 새 URL로 이동합니다. 이 메서드는 페이지를 이동한 후 뒤로 가기 버튼으로 이전 페이지로 돌아올 수 있습니다. |
reload() | 현재 페이지를 새로 고칩니다. |
replace(url) | 새 URL로 이동하며, 뒤로 가기 버튼으로 이전 페이지로 돌아올 수 없습니다. |
2. 예제 코드
▼ 사용 예제 코드
// 현재 URL 출력
console.log(location.href);
// URL의 프로토콜 출력
console.log(location.protocol);
// URL의 호스트 이름 출력
console.log(location.hostname);
// // 페이지 새로 고침
location.reload();
// 새 URL로 이동
location.assign('https://blueshare.tistory.com');
// 새 URL로 이동하고 이전 페이지로 돌아오지 못하게 함
location.replace('https://blueshare.tistory.com');
3. 주의 사항 및 브라우저 호환성
Location 객체는 모든 주요 브라우저에서 지원되며, 일반적으로 호환성 문제가 없습니다. 그러나 일부 브라우저 버전에 따라 지원되지 않는 속성이나 메서드가 있을 수 있으니 사용하기 전에 확인해야 합니다.
☞ 이 글에서는 BOM의 Location 객체에 대해 간략하게 알아보았습니다. 다음 글에서는 BOM의 다른 객체인 History 객체에 대해 알아볼 예정입니다.
자바스크립트 기초 이전 게시물
- 브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기
- window 객체: 알림(alert), 확인(confirm), 프롬프트(prompt) 사용 예제
- window 객체 타이머 관리: setTimeout과 setInterval 사용 예제
- window.open: POST 방식으로 웹 브라우저의 새 창 또는 탭 열기
- window 객체: 브라우저 창 크기와 위치 조절 사용 예제
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!