BOM을 활용한 브라우저의 주소 및 URL 조작

개요

BOM (Browser Object Model)은 자바스크립트를 사용하여 브라우저와 상호작용하기 위한 객체 모델입니다. BOM을 사용하면 브라우저의 주소와 URL을 조작할 수 있습니다. 이 글에서는 BOM을 활용하여 브라우저의 주소와 URL을 조작하는 방법을 알아보겠습니다.

window.location 객체

window.location 객체는 현재 문서의 주소와 URL에 대한 정보를 제공하는 객체입니다. 이 객체를 사용하여 브라우저의 주소와 URL을 조작할 수 있습니다. 다음은 window.location 객체의 주요 속성들입니다.

주소 및 URL 조작 예제

// 현재 페이지의 URL 출력
console.log(window.location.href);

// 현재 페이지의 프로토콜 출력
console.log(window.location.protocol);

// 현재 페이지의 호스트 이름 및 포트 번호 출력
console.log(window.location.host);

// 현재 페이지의 경로 출력
console.log(window.location.pathname);

// 현재 페이지의 쿼리 문자열 출력
console.log(window.location.search);

// 현재 페이지의 해시 문자열 출력
console.log(window.location.hash);

// 새로운 URL로 리다이렉트
window.location.href = "https://www.example.com";

// 현재 페이지의 쿼리 문자열 변경
window.location.search = "?param1=value1&param2=value2";

위 예제에서는 window.location 객체의 속성들을 사용하여 현재 페이지의 URL 정보를 출력하고, 새로운 URL로 리다이렉트하는 방법을 보여줍니다. 또한, 현재 페이지의 쿼리 문자열을 변경하여 검색 파라미터를 추가하는 예제도 있습니다.

결론

BOM을 활용하면 자바스크립트를 사용하여 브라우저의 주소와 URL을 조작할 수 있습니다. window.location 객체의 속성들을 이용하여 각각의 정보를 가져오거나 설정할 수 있으며, 이를 활용하여 원하는 페이지로 리다이렉트하거나 쿼리 문자열을 변경할 수 있습니다.

관련 참고 자료

#BOM #브라우저 #주소 #URL