Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 표제 객체

<시간/>

HTML DOM Heading 객체는

에서

까지의 HTML 표제 요소와 연결됩니다. 제목 객체를 사용하여 각각 createElement() 및 getElementById() 메서드로 제목 요소를 만들고 액세스할 수 있습니다.

구문

다음은 −

의 구문입니다.

제목 개체 만들기 -

var p = document.createElement("H1");

예시

Heading 개체의 예를 살펴보겠습니다. 

<!DOCTYPE html>
<html>
<body>
<h1>Heading object example</h1>
<p>Create a h1 element by clicking the below button</p>
<button onclick="createH1()">CREATE</button>
<script>
   function createH1() {
      var h = document.createElement("H1");
      var txt = document.createTextNode("H1 element has been created");
      h.appendChild(txt);
      document.body.appendChild(h);
   }
</script>
</body>
</html>

출력

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

HTML DOM 표제 객체

CREATE 버튼 클릭 시 -

HTML DOM 표제 객체

위의 예에서 -

사용자가 클릭할 때 headerCreate() 메서드를 실행하는 CREATE 버튼을 먼저 만들었습니다. 

<button onclick="createH1()">CREATE</button>

CreateH1() 메서드는 문서 객체의 createElement() 메서드를 사용하여

표제 요소를 만들고 변수 h에 할당합니다. 그런 다음 문서 객체의 createTextNode() 메서드를 사용하여 텍스트 노드를 만듭니다. 텍스트 노드는 appendChild() 메서드를 사용하여

요소에 추가됩니다. 마지막으로 텍스트 노드와 함께

요소는 appendChild() 메서드를 사용하여 문서 본문의 자식으로 추가됩니다. -

function createH1() {
   var h = document.createElement("H1");
   var txt = document.createTextNode("H1 element has been created");
   h.appendChild(txt);
   document.body.appendChild(h);
}