HTML DOM DFN 객체 완벽 가이드 – 정의 요소를 동적으로 생성하는 방법

HTML DOM의 DFN 객체는 HTML <dfn> 요소와 연관된 객체입니다. <dfn> 요소 내부에 포함된 텍스트는 주변 문맥에서 정의되는 용어를 의미하며, 브라우저에서는 일반적으로 기울임꼴로 표시됩니다. DFN 객체는 자바스크립트를 통해 이 <dfn> 요소에 접근하고 조작할 수 있게 해줍니다.

문법(Syntax)

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

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

document 객체의 createElement() 메서드에 "DFN"을 인자로 전달하면 새로운 <dfn> 요소가 생성됩니다.

예제(Example)

HTML DOM DFN 객체의 실제 사용 예제를 살펴보겠습니다. 아래 코드는 버튼을 클릭하면 텍스트가 포함된 <dfn> 요소를 동적으로 생성하는 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h2>DFN 객체 예제</h2>
<p>아래 버튼을 클릭하면 텍스트가 포함된 dfn 요소가 생성됩니다.</p>
<button onclick="dfnCreate()">CREATE</button> <br><br>
<script>
    function dfnCreate() {
        var x = document.createElement("DFN");
        var t = document.createTextNode("정의 요소입니다");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 CREATE 버튼이 화면에 나타납니다.

HTML DOM DFN 객체 완벽 가이드 – 정의 요소를 동적으로 생성하는 방법

CREATE 버튼을 클릭하면 다음과 같이 <dfn> 요소가 문서에 추가됩니다.

HTML DOM DFN 객체 완벽 가이드 – 정의 요소를 동적으로 생성하는 방법

코드 상세 설명

먼저 사용자가 클릭하면 dfnCreate() 함수를 실행하는 CREATE 버튼을 생성합니다.

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

dfnCreate() 함수의 동작 과정은 다음과 같습니다.

요소 생성: document 객체의 createElement() 메서드를 사용하여 <dfn> 요소를 생성합니다.
텍스트 노드 생성: createTextNode() 메서드를 사용하여 <dfn> 요소 안에 들어갈 텍스트 노드를 만듭니다.
텍스트 노드 추가: appendChild() 메서드로 텍스트 노드를 <dfn> 요소의 자식으로 추가합니다.
문서에 추가: 마지막으로 <dfn> 요소 전체를 document.body의 자식으로 추가하여 화면에 표시합니다.

function dfnCreate() {
    var x = document.createElement("DFN");
    var t = document.createTextNode("정의 요소입니다");
    x.appendChild(t);
    document.body.appendChild(x);
}

이처럼 DFN 객체를 활용하면 용어 정의를 나타내는 <dfn> 요소를 자바스크립트로 동적으로 생성하고 조작할 수 있습니다. 문서에서 특정 용어를 강조하거나 정의 목록을 동적으로 구성해야 하는 경우 유용하게 활용할 수 있습니다.