HTML DOM Bdoオブジェクトとは？dirプロパティと使い方を徹底解説
HTML DOM Bdoオブジェクトの概要
HTML DOMのBdoオブジェクトは、HTMLの<bdo>要素に関連付けられたオブジェクトです。「bdo」は「Bi-Directional Override（双方向オーバーライド）」の略称で、テキストの表示方向を意図的に上書きするために使用されます。
通常、テキストの流れは左から右（ltr）ですが、<bdo>要素を使うことで、この方向を右から左（rtl）に変更するなど、自由に制御することが可能です。Bdoオブジェクトは、この<bdo>要素をJavaScriptから生成・操作するための手段を提供します。
Bdoオブジェクトのプロパティ
Bdoオブジェクトが持つプロパティは以下の通りです。
| プロパティ | 説明 |
|---|---|
| dir | <bdo>要素のdir属性の値を設定、または取得します |
構文（シンタックス）
bdoオブジェクトの作成
var a = document.createElement("BDO");bdoオブジェクトへのアクセス
var a = document.getElementById("demoBdo");サンプルコード
それでは、HTML DOM Bdoオブジェクトの実際の使用例を見てみましょう。以下の例では、ボタンをクリックすると右から左に表示されるテキストを持つbdo要素を動的に生成し、その方向を取得して表示します。
<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックすると、右から左に表示されるテキストを持つbdo要素が生成されます</p>
<button onclick="bdoCreate()">CREATE</button>
<button onclick="getDirection()">GET DIRECTION</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>実行結果
上記のコードを実行すると、以下のような出力が得られます。
CREATEボタンをクリックした場合：<bdo>要素が生成され、「RIGHT TO LEFT」というテキストが右から左に表示されます。
GET DIRECTIONボタンをクリックした場合：生成されたbdo要素のdir属性の値が取得され、画面に表示されます。
まとめ
Bdoオブジェクトは、多言語対応のWebサイトなどでアラビア語やヘブライ語のように右から左へ記述する言語を扱う際に特に役立ちます。dirプロパティを活用することで、JavaScriptから動的にテキスト方向を制御できるため、国際化（i18n）対応の開発において覚えておくと便利なオブジェクトです。
-
HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注