HTML DOM Header 객체 완벽 정리 – 생성과 접근 방법

HTML DOM의 Header 객체는 HTML5에서 새롭게 도입된 <header> 요소와 연관된 객체입니다. 이 객체를 활용하면 createElement() 메서드로 새로운 <header> 요소를 동적으로 생성할 수 있고, getElementById() 메서드로 기존에 존재하는 <header> 요소에 접근할 수 있습니다.

문법(Syntax)

Header 객체를 다루는 기본 문법은 다음과 같습니다.

Header 객체 생성하기

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

예제

아래 예제를 통해 HTML DOM Header 객체의 실제 사용 방법을 살펴보겠습니다. 버튼을 클릭하면 <header> 요소가 동적으로 생성되는 코드입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Header 객체 예제</h1>
<p>아래 버튼을 클릭하여 header 요소를 생성해 보세요</p>
<button onclick="headerCreate()">CREATE</button>
<script>
    function headerCreate() {
        var h = document.createElement("HEADER");
        document.body.appendChild(h);
        var h2 = document.createElement("H2");
        var txt = document.createTextNode("h2 요소를 포함하는 header 요소가 생성되었습니다");
        h2.appendChild(txt);
        h.appendChild(h2);
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Header 객체 완벽 정리 – 생성과 접근 방법

CREATE 버튼을 클릭한 후의 결과는 다음과 같습니다.

HTML DOM Header 객체 완벽 정리 – 생성과 접근 방법

코드 상세 분석

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

먼저, 사용자가 클릭했을 때 headerCreate() 함수를 실행하는 CREATE 버튼을 만듭니다.

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

headerCreate() 함수 내부에서는 다음과 같은 순서로 작업이 진행됩니다.

header 요소 생성: document 객체의 createElement() 메서드를 호출하여 <header> 요소를 만들고 변수 h에 할당합니다.
문서에 추가: appendChild() 메서드를 사용해 생성한 header 요소를 document body의 자식 노드로 추가합니다.
h2 요소와 텍스트 노드 생성: 같은 방식으로 <h2> 요소를 생성하고, document 객체의 createTextNode() 메서드로 텍스트 노드를 만듭니다.
텍스트 노드 삽입: appendChild() 메서드로 텍스트 노드를 <h2> 요소에 추가합니다.
최종 조립: 마지막으로 텍스트를 포함한 <h2> 요소 전체를 header 요소의 자식으로 추가합니다.

function headerCreate() {
    var h = document.createElement("HEADER");
    document.body.appendChild(h);
    var h2 = document.createElement("H2");
    var txt = document.createTextNode("h2 요소를 포함하는 header 요소가 생성되었습니다");
    h2.appendChild(txt);
    h.appendChild(h2);
}

정리

이처럼 HTML DOM의 Header 객체를 활용하면 JavaScript만으로 페이지 구조를 동적으로 변경할 수 있습니다. createElement()로 요소를 만들고, createTextNode()로 콘텐츠를 추가한 뒤, appendChild()로 계층 구조를 구성하는 패턴은 다른 DOM 요소를 다룰 때도 동일하게 적용되므로 꼭 기억해 두시기 바랍니다.