HTML DOM Footer(푸터) 객체 완벽 가이드

HTML DOM의 Footer 객체는 HTML <footer> 요소와 연결된 객체입니다. <footer> 요소는 시맨틱(semantic) 태그의 한 종류로, HTML5에서 새롭게 도입되었습니다. Footer 객체를 활용하면 createElement() 메서드를 통해 <footer> 요소를 동적으로 생성할 수 있고, getElementById() 메서드를 통해 이미 존재하는 <footer> 요소에 접근할 수 있습니다.

문법(Syntax)

Footer 객체를 생성하는 기본 문법은 다음과 같습니다.

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

예제(Example)

다음은 Footer 객체를 실제로 활용한 예제입니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function createFoot() {
        var f = document.createElement("FOOTER");
        document.body.appendChild(f);
        var p = document.createElement("P");
        var txt = document.createTextNode("Copyright ©, 2019");
        p.appendChild(txt);
        f.appendChild(p);
    }
</script>
</head>
<body>
<h1>Footer object example</h1>
<p>아래 버튼을 클릭하면 이 웹페이지에 푸터가 생성됩니다.</p>
<button onclick="createFoot()">CREATE</button>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Footer(푸터) 객체 완벽 가이드 – 생성 및 활용 방법

CREATE 버튼을 클릭하면 아래와 같이 페이지 하단에 푸터가 추가됩니다.

HTML DOM Footer(푸터) 객체 완벽 가이드 – 생성 및 활용 방법

코드 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 버튼 생성 및 이벤트 연결

먼저 CREATE 버튼을 만들고, 사용자가 클릭했을 때 createFoot() 함수가 실행되도록 onclick 이벤트를 연결합니다.

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

2. footer 요소 생성 및 문서에 추가

createFoot() 함수 내부에서는 먼저 document 객체의 createElement() 메서드를 사용해 <footer> 요소를 생성합니다. 그런 다음 appendChild() 메서드로 이 footer 요소를 문서의 body에 추가하고, 같은 방식으로 <p>(단락) 요소도 하나 생성합니다.

3. 텍스트 노드 생성 및 조립

function createFoot() {
    var f = document.createElement("FOOTER");
    document.body.appendChild(f);
    var p = document.createElement("P");
    var txt = document.createTextNode("Copyright ©, 2019");
    p.appendChild(txt);
    f.appendChild(p);
}