HTML DOM Base 객체 완벽 가이드 – 기본 URL 설정 방법

HTML DOM의 Base 객체는 HTML <base> 요소와 연결된 객체입니다. <base> 요소는 HTML 문서 내에 있는 모든 상대 URL이 참조할 기준(base) URL을 지정하는 역할을 합니다. 하나의 HTML 문서에는 최대 한 개의 <base> 요소만 존재할 수 있으며, Base 객체를 활용하면 이 요소의 href 속성 값을 설정하거나 읽어올 수 있습니다.

Base 객체의 속성(Properties)

Base 객체에서 제공하는 주요 속성은 다음과 같습니다.

속성	설명
href	<base> 요소의 href 속성 값을 설정하거나 반환합니다.
target	<base> 요소의 target 속성 값을 설정하거나 반환합니다.

문법(Syntax)

Base 객체를 사용하는 기본 문법은 다음과 같습니다.

base 요소 생성하기 −

document.createElement("base")

base 요소에 접근하기 −

var a = document.getElementById("demoBase");

예제(Example)

아래 예제를 통해 Base 객체의 실제 동작을 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<body>
<p>먼저 요소를 생성한 뒤 접근해 보겠습니다.</p>
<p>아래 버튼을 클릭하여 BASE 요소를 생성하거나 접근하세요.</p>
<button onclick="CreateBase()">CREATE</button>
<button onclick="AcessBase()">ACCESS</button>
<p id="SAMPLE"></p>
<script>
    function CreateBase() {
        var x = document.createElement("BASE");
        x.setAttribute("id","myBase");
        x.setAttribute("href", "https://www.google.com");
        document.head.appendChild(x);
        document.getElementById("SAMPLE").innerHTML = "BASE element with href https://www.google.com is created";
    }
    function AcessBase() {
        var x = document.getElementById("myBase").href;
        document.getElementById("SAMPLE").innerHTML = x;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Base 객체 완벽 가이드 – 기본 URL 설정 방법

CREATE 버튼 클릭 시 −

HTML DOM Base 객체 완벽 가이드 – 기본 URL 설정 방법

ACCESS 버튼 클릭 시 −

HTML DOM Base 객체 완벽 가이드 – 기본 URL 설정 방법

예제 코드 분석

위 예제에서는 두 개의 버튼인 CREATE와 ACCESS를 만들어 각각 CreateBase() 함수와 AcessBase() 함수를 실행하도록 구성했습니다.

<button onclick="CreateBase()">CREATE</button>
<button onclick="AcessBase()">ACCESS</button>

CreateBase() 함수는 새로운 base 요소를 생성하여 변수 x에 할당합니다. 이후 setAttribute() 메서드를 사용해 id와 href 속성을 지정하고, appendChild() 메서드로 생성된 base 요소를 문서의 head 영역에 추가합니다. 마지막으로 SAMPLE이라는 id를 가진 단락에 base 요소가 생성되었다는 메시지를 출력합니다.

function CreateBase() {
    var x = document.createElement("BASE");
    x.setAttribute("id","myBase");
    x.setAttribute("href", "https://www.google.com");
    document.head.appendChild(x);
    document.getElementById("SAMPLE").innerHTML = "BASE element with href https://www.google.com is created";
}

AcessBase() 함수는 앞서 생성한 <base> 요소에 접근하기 위한 함수입니다. getElementById()로 해당 요소를 찾은 후 href 값을 읽어 변수 x에 저장하고, 그 값을 SAMPLE이라는 id를 가진 단락에 표시합니다.

function AcessBase() {
    var x = document.getElementById("myBase").href;
    document.getElementById("SAMPLE").innerHTML = x;
}