HTML DOM Base target 속성 – 하이퍼링크가 열리는 위치 설정하기

HTML DOM Base target 속성이란?

HTML DOM의 target 속성은 HTML <base> 요소와 연결된 속성으로, <base> 요소의 target 속성 값을 가져오거나 설정하는 데 사용됩니다. target 속성은 문서 내 모든 하이퍼링크가 어디에서 열릴지를 지정하는 중요한 역할을 합니다. 링크는 현재 페이지 자체에서 열릴 수도 있고, 새 창이나 새 탭에서 열릴 수도 있습니다.

속성 값(Property Values)

target 속성에 사용할 수 있는 값은 다음과 같습니다.

속성 값	설명
_blank	새 창(새 탭)에서 링크를 엽니다.
_self	링크가 클릭된 동일한 프레임에서 링크를 엽니다. 기본 동작입니다.
_parent	부모 프레임셋(parent frameset)에서 링크를 엽니다.
_top	창 전체 영역에서 링크를 엽니다.
framename	지정한 이름의 프레임에서 링크를 엽니다.

문법(Syntax)

target 속성 값을 반환하는 구문은 다음과 같습니다.

baseObject.target

target 속성 값을 설정하는 구문은 다음과 같습니다.

baseObject.target = "_blank|_self|_parent|_top|framename"

예제(Example)

다음은 HTML DOM target 속성을 활용한 실습 예제입니다.

<!DOCTYPE html>
<html>
<head>
<base id="Base" target="newframe1" href="https://www.example.com">
</head>
<body>
<p>Click the below button to get the target attribute value</p>
<button onclick="getTarget()">GET TARGET</button>
<p>Click the below button to set the target attribute value</p>
<button onclick="setTarget()">SET TARGET</button>
<p id="Sample"></p>
<script>
    function getTarget() {
        var x = document.getElementById("Base").target;
        document.getElementById("Sample").innerHTML = "Base target for all links is: " + x;
    }
    function setTarget(){
        document.getElementById("Base").target="_blank"
        document.getElementById("Sample").innerHTML="Target has been changed from newframe1 to _blank"
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Base target 속성 – 하이퍼링크가 열리는 위치 설정하기

GET TARGET 버튼을 클릭했을 때:

SET TARGET 버튼을 클릭했을 때:

코드 설명

위 예제에서는 먼저 각각 getTarget() 함수와 setTarget() 함수를 실행하는 두 개의 버튼(GET TARGET, SET TARGET)을 생성했습니다.

<button onclick="getTarget()">GET TARGET</button>
<button onclick="setTarget()">SET TARGET</button>

getTarget() 함수는 id가 "Base"인 요소, 즉 여기서는 <base> 요소를 가져옵니다. <base> 요소의 target 속성 값은 변수 x에 저장되며, innerHTML 속성을 통해 id가 "Sample"인 단락에 결과가 표시됩니다.

function getTarget() {
    var x = document.getElementById("Base").target;
    document.getElementById("Sample").innerHTML = "Base target for all links is: " + x;
}

setTarget() 함수 역시 id가 "Base"인 <base> 요소를 가져온 뒤, 해당 요소의 target 속성을 "_blank"로 설정합니다. 이는 모든 링크가 새 탭에서 열리도록 변경한다는 의미입니다. 이후 "Target has been changed from newframe1 to _blank"(target이 newframe1에서 _blank로 변경되었습니다)라는 메시지가 id가 "Sample"인 단락에 출력됩니다.