브라우저 객체 모델(BOM) 이해하기: Location 객체

브라우저 객체 모델(BOM) 이해하기: Location 객체

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

▼ 브라우저 객체 모델의 계층 구조

브라우저 객체 모델의 계층 구조 화면입니다.

1. Location 객체의 주요 속성과 메서드

▼ Location 객체의 주요 속성과 메서드

속성/메서드설명
속성 
href현재 URL 전체를 가져오거나 설정합니다.
protocolURL의 프로토콜(http:, https: 등)을 가져오거나 설정합니다.
hostURL의 호스트 이름과 포트 번호를 가져오거나 설정합니다.
hostnameURL의 호스트 이름을 가져오거나 설정합니다.
portURL의 포트 번호를 가져오거나 설정합니다.
pathnameURL의 경로 이름을 가져오거나 설정합니다.
searchURL의 쿼리 문자열을 가져오거나 설정합니다.
hashURL의 해시(# 뒤에 있는 문자열)을 가져오거나 설정합니다.
메서드 
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 객체에 대해 알아볼 예정입니다.

자바스크립트 기초 이전 게시물

  1. 브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기
  2. window 객체: 알림(alert), 확인(confirm), 프롬프트(prompt) 사용 예제
  3. window 객체 타이머 관리: setTimeout과 setInterval 사용 예제
  4. window.open: POST 방식으로 웹 브라우저의 새 창 또는 탭 열기
  5. window 객체: 브라우저 창 크기와 위치 조절 사용 예제
위로 스크롤