HTML DOM 약어(Abbreviation) 객체 – abbr 요소 접근 방법과 활용 예제

HTML에서 <abbr> 요소는 줄임말(약어)을 표시할 때 사용됩니다. 이 <abbr> 요소를 자바스크립트에서 다룰 수 있도록 해주는 것이 바로 DOM의 약어(Abbreviation) 객체입니다.

약어 객체에 접근하면 해당 요소의 속성이나 내용을 동적으로 읽거나 수정할 수 있습니다. 예를 들어, 마우스를 올렸을 때 표시되는 title 속성 값을 가져와 화면에 출력하는 것도 가능합니다.

기본 예제

아래 예제에서는 getElementById() 메서드를 사용하여 약어 객체에 접근하고, 버튼을 클릭하면 해당 약어의 title 속성 값을 화면에 표시하는 방법을 살펴봅니다.

<!DOCTYPE html>
<html>
<body>
<h2>데모 제목</h2>
<abbr id="myid" title="Board of Control for Cricket in India">BCCI</abbr>
<button onclick="display()">약어 제목 표시하기</button>
<p id="demo"></p>
<script>
    function display() {
        var a = document.getElementById("myid").title;
        document.getElementById("demo").innerHTML = a;
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 페이지에 'BCCI'라는 약어와 버튼이 함께 표시됩니다.

HTML DOM 약어(Abbreviation) 객체 – abbr 요소 접근 방법과 활용 예제

버튼을 클릭하면 자바스크립트 함수가 실행되어, 약어에 설정된 title 값인 'Board of Control for Cricket in India'가 아래 문단에 출력됩니다.

HTML DOM 약어(Abbreviation) 객체 – abbr 요소 접근 방법과 활용 예제

코드 설명

<abbr> 요소: id와 title 속성을 지정하여 약어를 정의합니다. title 속성은 약어의 전체 의미를 담고 있으며, 브라우저에서 마우스를 올리면 툴팁으로 표시됩니다.
display() 함수: document.getElementById("myid").title로 약어 객체의 title 속성 값을 가져온 뒤, innerHTML을 통해 결과를 화면에 출력합니다.

이처럼 HTML DOM의 약어 객체를 활용하면 <abbr> 요소의 속성을 자유롭게 읽고 조작할 수 있어, 동적인 웹 페이지 구성에 유용하게 사용됩니다.