HTML DOM Figure 객체 완벽 정리 – 자바스크립트로 figure 요소 동적으로 다루기

HTML DOM의 Figure 객체는 HTML의 <figure> 요소를 자바스크립트에서 표현하기 위해 사용됩니다. 이 객체를 활용하면 웹 페이지가 로드된 후에도 <figure> 요소를 동적으로 생성하거나, 기존에 존재하는 figure 요소에 접근하여 속성을 변경하고 조작할 수 있습니다.

문법(Syntax)

Figure 객체를 새로 생성할 때는 document 객체의 createElement() 메서드를 사용합니다. 기본 문법은 다음과 같습니다.

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

예제(Example)

아래 예제는 버튼 클릭 시 <figure> 요소와 그 안에 이미지(<img>)를 동적으로 생성하여 문서에 추가하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function createFigure(){
        var fig = document.createElement("FIGURE");
        fig.setAttribute("id", "Figure1");
        document.body.appendChild(fig);
        var i = document.createElement("IMG");
        i.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servletsmini-logo.jpg");
        i.setAttribute("width", "250");
        i.setAttribute("height", "200");
        i.setAttribute("alt", "Eiffel Tower");
        fig.appendChild(i);
    }
</script>
</head>
<body>
<h2>HTML DOM figure object</h2>
<button onclick="createFigure()">CREATE</button><br><br>
</body>
</html>

실행 결과(Output)

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

HTML DOM Figure 객체 완벽 정리 – 자바스크립트로 figure 요소 동적으로 다루기

CREATE 버튼을 클릭하면 아래와 같이 figure 요소와 이미지가 화면에 추가됩니다.

HTML DOM Figure 객체 완벽 정리 – 자바스크립트로 figure 요소 동적으로 다루기

코드 상세 설명

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

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

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

<button onclick="createFigure()">CREATE</button><br><br>

2. figure 요소 생성 및 body에 추가

createFigure() 함수 내부에서는 document 객체의 createElement() 메서드를 사용해 <figure> 요소를 생성합니다. 이어서 setAttribute() 메서드로 해당 요소의 id를 "Figure1"로 지정한 뒤, appendChild() 메서드를 통해 문서의 body 마지막에 추가합니다.

3. img 요소 생성 및 속성 설정

다음으로 figure 요소 안에 넣을 이미지를 위해 <img> 요소를 생성합니다. setAttribute() 메서드를 사용해 src, width, height, alt 속성 값을 각각 설정합니다.

4. img를 figure의 자식으로 추가

마지막으로 appendChild() 메서드를 호출하여 img 요소를 figure 요소의 자식 노드로 추가합니다. 전체 함수 코드는 다음과 같습니다.

function createFigure(){
    var fig = document.createElement("FIGURE");
    fig.setAttribute("id", "Figure1");
    document.body.appendChild(fig);
    var i = document.createElement("IMG");
    i.setAttribute("src", "EiffelTower.jpg");
    i.setAttribute("width", "250");
    i.setAttribute("height", "200");
    i.setAttribute("alt", "Eiffel Tower");
    fig.appendChild(i);
}

이처럼 HTML DOM의 Figure 객체를 사용하면 <figure> 요소를 자유롭게 생성·조작할 수 있으며, 이미지나 차트, 코드 블록 등 독립적인 콘텐츠를 의미론적으로(markup) 감싸는 데 유용하게 활용할 수 있습니다.