HTML DOM Bold 객체 완벽 가이드 – 굵은 텍스트 동적으로 만들기

HTML DOM Bold 객체란?

HTML DOM의 Bold 객체는 HTML의 (굵게) 태그와 연결된 객체입니다. 태그는 태그로 감싼 텍스트를 화면에 굵게(bold) 표시할 때 사용됩니다. 자바스크립트에서 Bold 객체를 활용하면 이 요소에 접근하여 속성을 읽거나 수정하고, 새로운 요소를 동적으로 생성할 수 있습니다.

참고로 Bold 객체는 표준 HTMLElement를 상속받기 때문에 className, id, style 등 모든 일반적인 DOM 속성과 메서드를 그대로 사용할 수 있습니다.

문법(Syntax)

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

Bold 객체 생성하기

var x = document.createElement("B");

document.createElement() 메서드에 태그 이름 "B"를 전달하면, 아직 화면에는 보이지 않는 새로운 요소가 메모리상에 만들어집니다. 이후 appendChild() 등으로 문서에 추가해야 실제로 화면에 나타납니다.

예제(Example)

버튼을 클릭하면 텍스트가 포함된 요소를 동적으로 생성하는 예제입니다.

<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 텍스트가 포함된 <b> 요소가 생성됩니다.</p>
<button onclick="createBold()">CREATE</button>
<br><br>
<script>
    function createBold() {
        var x = document.createElement("B");
        var t = document.createTextNode("SAMPLE BOLD TEXT");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

코드 설명

위 예제의 동작 순서는 다음과 같습니다.

1. createBold() 함수가 버튼 클릭 시 호출됩니다.
2. document.createElement("B")로 새로운 요소를 만듭니다.
3. document.createTextNode()로 "SAMPLE BOLD TEXT"라는 텍스트 노드를 생성합니다.
4. appendChild(t)로 텍스트를 요소 안에 넣습니다.
5. document.body.appendChild(x)로 완성된 요소를 body 끝에 추가합니다.

출력 결과(Output)

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

HTML DOM Bold 객체 완벽 가이드 – 굵은 텍스트 동적으로 만들기

CREATE 버튼을 클릭하면 페이지 하단에 굵은 텍스트가 추가됩니다.

HTML DOM Bold 객체 완벽 가이드 – 굵은 텍스트 동적으로 만들기

정리

HTML DOM Bold 객체는 태그를 자바스크립트로 제어할 수 있게 해주는 인터페이스입니다. createElement("B")로 요소를 만들고, 텍스트 노드를 추가한 뒤 body에 삽입하는 과정만 익히면, 클릭 이벤트나 사용자 입력에 반응해 굵은 텍스트를 실시간으로 생성하는 동적인 웹 페이지를 쉽게 구현할 수 있습니다.