HTML DOM 강조(Em) 객체 이해하기: 생성과 활용 방법

HTML DOM의 강조 객체(emphasized object)는 HTML의 요소와 연관된 DOM 인터페이스입니다. 요소는 특정 텍스트를 강조할 때 사용되며, 해당 텍스트를 기울임꼴(이탤릭체)로 표시합니다.

자바스크립트를 통해 강조 객체를 다루려면 새로운 요소를 만들 때는 createElement() 메서드를, 이미 존재하는 요소에 접근할 때는 getElementById() 메서드를 각각 사용하면 됩니다.

문법(Syntax)

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

var e = document.createElement("EM");

예제

버튼을 클릭하면 요소가 동적으로 생성되는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>emphasized object example</h1>
<p>아래 버튼을 클릭하면 em 요소가 생성됩니다</p>
<button onclick="createEM()">CREATE</button>
<br><br>
<script>
    function createEM() {
        var e = document.createElement("EM");
        var txt = document.createTextNode("HELLO WORLD");
        e.appendChild(txt);
        document.body.appendChild(e);
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM 강조(Em) 객체 이해하기: 생성과 활용 방법

CREATE 버튼을 클릭한 후의 결과입니다.

HTML DOM 강조(Em) 객체 이해하기: 생성과 활용 방법

코드 동작 원리

먼저 클릭 시 createEM() 함수를 실행하는 CREATE 버튼을 정의했습니다.

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

createEM() 함수의 내부 동작 순서는 다음과 같습니다.

요소 생성: document 객체의 createElement() 메서드로 요소를 생성하고 변수 e에 할당합니다.
텍스트 노드 생성: createTextNode() 메서드로 "HELLO WORLD"라는 텍스트 노드를 만듭니다.
텍스트 추가: appendChild() 메서드로 텍스트 노드를 요소에 자식 노드로 추가합니다.
문서에 삽입: 마지막으로 요소 전체를 document의 body에 appendChild()로 추가하여 화면에 표시합니다.

function createEM() {
    var e = document.createElement("EM");
    var txt = document.createTextNode("HELLO WORLD");
    e.appendChild(txt);
    document.body.appendChild(e);
}

이처럼 DOM API를 조합하면 페이지 로드 후에도 사용자의 상호작용에 따라 강조 텍스트를 동적으로 추가할 수 있습니다. 참고로 요소는 단순히 기울임꼴 스타일만 적용하는 것이 아니라, 스크린 리더 등 보조 기술에서 해당 텍스트를 강조하여 읽어주기 때문에 의미론적(semantically)으로도 중요한 역할을 합니다.