오봉이와 함께하는 개발 블로그

JavaScript - 브라우저 객체 모델 location객체 본문

FE/JavaScript

JavaScript - 브라우저 객체 모델 location객체

오봉봉이 2021. 12. 10. 13:52
728x90

자바스크립트 객체

  • 내장객체
  • 브라우저 객체
  • 문서 객체(DOM)
  • 사용자 정의 객체

브라우저 객체 모델

  • 자바스크립트에서는 웹 페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공
  • 객체들을 계층 구조로 분류
  • 브라우저 객체
    • 웹 브라우저를 대상으로 이루어진 객체
    • window 객체 : 창
    • document 객체 : 문서
    • history 객체 : 웹 브라우저 기록 정보
    • location 객체 : 주소 정보
    • navigator 객체 : 웹 브라우저 정보(종류 판별 등)

Location 객체

  • 현재 브라우저의 주소창에 표시된 주소 값에 관련된 내용을 다루는 객체
  • Location 주요 메소드
    • href = URL : 지정된 URL로 이동
    • pathname : 도메인을 제외한 실제 파일 경로
    • assign(URL) : 지정된 URL로 페이지 이동
    • replace(URL) : 현재 페이지를 URL로 대체(이 경우에 histroy 기록이 남지 않음, back버튼이 적용 안됨)
    • reload() : 문서 내용 새로 고침
location 객체 예제 loaction.html
        <script type="text/javascript">
            function hrefMove() { // 뒤로가기 가능
                location.href = "http://www.google.com"; // 크롬 사용시
                // window.location.href("http://www.google.com"); // 크롬에서는 지원 안되는 형식
            }
            function assignMove() { // 뒤로가기 가능
                location.assign("http://www.daum.net");
            }
            function replaceMove() { // 뒤로가기 불가능
                location.replace("http://www.youtube.com");
            }
        </script>
</head>
<body>
    <a href="www.naver.com">네이버</a><br><br>
    <button onclick="hrefMove()">구글</button>
    <button onclick="assignMove()">다음</button>
    <button onclick="replaceMove()">유튜브</button>
</body>
728x90
저작자표시

'FE > JavaScript' 카테고리의 다른 글

JavaScript - 문서 객체 모델  (0) 2021.12.10
JavaScript - 브라우저 객체 모델 navigator객체  (0) 2021.12.10
JavaScript - 브라우저 객체 모델 window객체  (0) 2021.12.10
JavaScript - 내장 객체(Date, Array, Math, String 객체)  (0) 2021.12.09
JavaScript - 함수 사용법 기초 2  (0) 2021.12.09
'FE/JavaScript' Related Articles more
Comments