HTML DOM small 객체란? 생성과 접근 방법 총정리

HTML DOM의 small 객체는 HTML <small> 요소와 연관된 DOM 객체입니다. 자바스크립트에서는 createElement() 메서드를 사용해 새로운 small 요소를 동적으로 생성할 수 있으며, getElementById() 메서드를 사용하면 문서에 이미 존재하는 small 요소에 접근할 수 있습니다.

<small> 요소의 특징

<small> 요소는 주변 텍스트보다 한 단계 작은 글꼴 크기로 렌더링됩니다. 저작권 표기, 법적 고지, 각주 등 세부 사항(fine print)을 표시할 때 유용하게 사용되며, CSS 없이도 시맨틱하게 텍스트의 중요도를 낮춰 표현할 수 있다는 장점이 있습니다.

문법(Syntax)

small 객체 생성하기

var s = document.createElement("SMALL");

예제

다음은 small 객체를 활용한 예제입니다. 버튼을 클릭하면 화면에 작은 크기의 텍스트가 동적으로 추가됩니다.

<!DOCTYPE html>
<html>
<body>
<h1>small 객체 예제</h1>
<p>아래 버튼을 클릭하면 텍스트가 포함된 small 요소가 생성됩니다</p>
<button onclick="CreateSmall()">생성</button>
<p>이것은 일반 텍스트입니다</p>
<script>
    function CreateSmall() {
      var s = document.createElement("SMALL");
      var txt = document.createTextNode("이것은 작은 텍스트입니다");
      s.appendChild(txt);
      document.body.appendChild(s);
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM small 객체란? 생성과 접근 방법 총정리

[생성] 버튼을 클릭하면 일반 텍스트 아래에 한 단계 작은 크기의 텍스트가 추가된 것을 확인할 수 있습니다.

HTML DOM small 객체란? 생성과 접근 방법 총정리

정리

HTML DOM의 small 객체를 활용하면 페이지를 새로고침하지 않고도 사용자의 상호작용에 따라 작은 크기의 텍스트를 실시간으로 추가할 수 있습니다. createElement()로 요소를 만들고, createTextNode()로 텍스트 노드를 생성한 뒤, appendChild()로 문서에 추가하는 과정은 다른 DOM 요소를 다룰 때도 동일하게 적용되므로 꼭 익혀두시길 권장합니다.