HTML DOM Bdo 객체는 HTML의 <bdo> 요소와 연결된 DOM 객체입니다. 여기서 'bdo'는 Bi-Directional Override(양방향 재정의)의 약자로, 텍스트가 화면에 표시되는 방향을 기본 설정과 다르게 강제로 지정할 때 사용됩니다.
일반적으로 텍스트는 왼쪽에서 오른쪽으로(ltr) 표시되지만, 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 다룰 때는 <bdo> 요소를 통해 텍스트 방향을 손쉽게 변경할 수 있습니다. Bdo 객체는 바로 이 <bdo> 요소를 자바스크립트로 생성하거나 접근·제어할 수 있게 해주는 역할을 합니다.
Bdo 객체의 속성(Property)
Bdo 객체는 단 하나의 속성만 가지고 있습니다.
| 속성 | 설명 |
|---|---|
| dir | <bdo> 요소의 dir 속성 값을 설정하거나 반환합니다. 'ltr'(왼쪽→오른쪽) 또는 'rtl'(오른쪽→왼쪽) 값을 가질 수 있습니다. |
기본 문법(Syntax)
bdo 객체 생성하기
var a = document.createElement("BDO");bdo 객체에 접근하기
var a = document.getElementById("demoBdo");실전 예제
아래 예제는 버튼 클릭 시 <bdo> 요소를 동적으로 생성하고, 해당 요소의 텍스트 방향을 확인하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 오른쪽에서 왼쪽으로 표시되는 텍스트를 가진 bdo 요소가 생성됩니다.</p>
<button onclick="bdoCreate()">생성</button>
<button onclick="getDirection()">방향 확인</button>
<br><br>
<p id="Sample"></p>
<script>
function bdoCreate() {
var x = document.createElement("BDO");
var t = document.createTextNode("RIGHT TO LEFT");
x.setAttribute("dir", "rtl");
x.setAttribute("id","myBDO");
x.appendChild(t);
document.body.appendChild(x);
}
function getDirection(){
var x= document.getElementById("myBDO").dir;
document.getElementById("Sample").innerHTML="텍스트 방향은 "+x+" 입니다.";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
[생성] 버튼을 클릭한 경우 — dir 속성이 'rtl'로 설정된 <bdo> 요소가 문서에 추가되며, 텍스트가 오른쪽에서 왼쪽으로 표시됩니다.
[방향 확인] 버튼을 클릭한 경우 — 생성된 <bdo> 요소의 dir 속성 값을 읽어와 화면에 출력합니다.
정리
HTML DOM Bdo 객체는 <bdo> 요소를 제어하기 위한 전용 인터페이스로, dir 속성 하나만을 제공하지만 다국어 환경에서 텍스트 표시 방향을 유연하게 조절해야 할 때 매우 유용하게 활용됩니다. 특히 RTL(Right-to-Left) 언어를 지원하는 웹 페이지를 개발할 때 꼭 알아두면 좋은 기능입니다.