HTML DOM baseURI 속성 완벽 정리 – 문서의 기본 URI 확인 방법

HTML DOM의 baseURI 속성은 현재 문서의 기본 URI(Uniform Resource Identifier)를 반환합니다. 이 속성은 읽기 전용(read-only)이며, 해당 페이지의 기본 URI를 나타내는 문자열 값을 반환한다는 특징이 있습니다.

문법(Syntax)

baseURI 속성의 기본 문법은 다음과 같습니다.

node.baseURI

예제(Example)

아래 예제를 통해 HTML DOM baseURI 속성의 실제 동작을 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 문서의 기본 URI를 확인할 수 있습니다</p>
<button onclick="BaseFunction()">BASE URI</button>
<p id="Sample"></p>
<script>
    function BaseFunction() {
        var x = document.baseURI;
        document.getElementById("Sample").innerHTML = x;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM baseURI 속성 완벽 정리 – 문서의 기본 URI 확인 방법

BASE URI 버튼을 클릭하면 아래와 같이 문서의 기본 URI가 화면에 표시됩니다.

HTML DOM baseURI 속성 완벽 정리 – 문서의 기본 URI 확인 방법

예제 코드 분석

위 예제의 핵심 동작 원리는 다음과 같습니다.

먼저, 클릭 시 BaseFunction() 함수를 실행하는 BASE URI 버튼을 생성했습니다.

<button onclick="BaseFunction()">BASE URI</button>

그다음, BaseFunction() 함수는 baseURI 속성을 사용해 문서의 기본 URI를 가져온 뒤, id가 "Sample"인 단락(<p>)에 그 결과를 출력합니다.

function BaseFunction() {
    var x = document.baseURI;
    document.getElementById("Sample").innerHTML = x;
}

정리

baseURI 속성은 <base> 태그나 페이지의 위치를 기준으로 문서의 절대 기본 URL을 문자열로 반환합니다. 별도의 설정 없이 간단히 호출만 하면 되므로, 현재 문서의 기준 주소를 자바스크립트로 확인해야 할 때 유용하게 활용할 수 있습니다.