HTML DOM 기본 href 속성

<시간/>

HTML DOM Base href 속성은 HTML 태그와 연결됩니다. 태그는 현재 HTML 문서의 모든 상대 URL에 대한 기본 URL을 지정하는 데 사용됩니다. HTML 문서에는 최대 하나의 태그가 있을 수 있습니다. 기본 href 속성은 기본 요소의 href 속성 값을 반환합니다.

구문

다음은 −

의 구문입니다.

href 속성 설정 -

baseObject.href = URL

여기서 URL은 기본 URL입니다.

href 속성 반환 -

baseObject.href

예시

Base href Property −

의 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<base id="myBase" href="https://www.bing.com">
</head>
<body>
<a href="/images">IMAGES</a>
<p>Click the below button to change href value of the above link</p>
<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>
<p id="Sample"></p>
<script>
   function SetHref() {
      document.getElementById("myBase").href = "https://duckduckgo.com";
      document.getElementById("Sample").innerHTML = "Base URL was changed from bing.com
      to duckduckgo.com";
   }
   function GetHref(){
      var x=document.getElementById("myBase").href;
   document.getElementById("Sample").innerHTML = x;
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 기본 href 속성

SET IT 버튼 클릭 시 -

HTML DOM 기본 href 속성

GET IT 버튼 클릭 시 -

HTML DOM 기본 href 속성

위의 예에서 -

먼저 ID가 "myBase"이고 값이 https://www.bing.com

인 href 속성이 있는 요소를 만들었습니다.

<base id="myBase" href="https://www.bing.com">

그런 다음 속성 href와 값이 "/images"인 앵커 요소를 만들었습니다. 여기서 "/images"는 기본 태그에 기본 경로가 제공되는 상대 경로입니다. 기본 및 앵커 요소 URL을 모두 결합하면 https://www.bing.com/images가 됩니다.

<a href="/images">IMAGES</a>

그런 다음 각각 SetHref() 및 GetHref() 함수를 호출하기 위해 두 개의 SET IT 및 GET IT 버튼을 만들었습니다.

<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>

SetHref() 함수는 "myBase" ID를 사용하여 요소를 가져옵니다. 그런 다음 href 속성을 사용하여 URL을 https://www.duckduckgo.com으로 설정합니다. 변경 성공 메시지는 id가 "Sample"인 단락에 표시됩니다.

function SetHref() {
   document.getElementById("myBase").href = "https://duckduckgo.com";
   document.getElementById("Sample").innerHTML = "Base URL was changed from bing.com to .comduckduckgo";
}

GetHref()는 "myBase" ID를 사용하여 요소를 가져옵니다. 그런 다음 href 속성을 사용하여 URL을 가져와 변수 x에 할당합니다. 그런 다음 innerHTML() 속성을 사용하여 innerHTML 단락을 x 로 변경합니다. 요소의 href 값이 표시됩니다.

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