HTML DOM 기본 개체

<시간/>

HTML DOM 기본 개체는 HTML 요소와 연결됩니다. 요소는 HTML 문서의 다른 모든 URL에 대한 기본 URL을 지정하는 데 사용됩니다. HTML 문서에는 최대 하나의 요소가 있을 수 있습니다. 기본 개체는 요소의 href 속성을 설정하거나 가져오는 데 사용됩니다.

속성

다음은 기본 개체의 속성입니다 -

속성	설명
href	기본 요소의 href 속성 값을 설정하거나 반환합니다.
타겟	기본 요소의 대상 속성 값을 설정하거나 반환합니다.

구문

다음은 −

의 구문입니다.

기본 요소 만들기 -

document.createElement ("base")

기본 요소 액세스 -

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

예시

기본 개체의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<body>
<p>Create the element first and then access it</p>
<p>Click the button below to create or access BASE element.</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>

출력

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

HTML DOM 기본 개체

CREATE 클릭 시 -

HTML DOM 기본 개체

ACCESS 클릭 시 -

HTML DOM 기본 개체

위의 예에서 -

CreateBase() 및 AccessBase() 기능을 각각 실행하기 위해 CREATE 및 ACCESS 두 개의 버튼을 생성했습니다.

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

CreateBase() 함수는 기본 요소를 만들고 변수 x에 할당합니다. 그런 다음 setAttribute() 메서드를 사용하여 id와 href를 설정합니다. 새로 생성된 기본 요소는 appendChild() 속성을 사용하여 문서 헤드에 추가됩니다. 마지막으로 기본 생성 메시지는 id가 SAMPLE인 단락에 표시됩니다.

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() 함수는 새로 생성된 요소에 액세스하기 위해 생성됩니다. id로 요소를 가져온 다음 href 값을 가져와 x라는 변수에 할당하면 됩니다. x의 정보는 ID가 SAMPLE 인 단락에 표시됩니다.

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