HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMの略語（Abbreviation）オブジェクトの使い方を解説

HTMLでは、<abbr>要素を使うことで略語をマークアップして表示できます。DOM（Document Object Model）におけるAbbreviationオブジェクトは、この<abbr>要素に対応するオブジェクトです。

Abbreviationオブジェクトを利用すると、JavaScriptから略語の説明（title属性）などを取得したり、動的に書き換えたりすることが可能になります。ここでは、実際のサンプルコードを通じて、Abbreviationオブジェクトへのアクセス方法を学んでいきましょう。

Abbreviationオブジェクトへのアクセス例

次の例では、id属性「myid」を持つ<abbr>要素を取得し、ボタンをクリックすると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() {
        // id「myid」のabbr要素からtitle属性の値を取得
        var a = document.getElementById("myid").title;
        // 取得した値をp要素に出力
        document.getElementById("demo").innerHTML = a;
    }
</script>
</body>
</html>

実行結果

ブラウザで上記のコードを実行すると、「BCCI」という略語とボタンが表示されます。

HTML DOMの略語（Abbreviation）オブジェクトの使い方を解説

続いて、ボタンをクリックしてみましょう。title属性に設定された「Board of Control for Cricket in India（インドクリケット管理委員会）」という正式名称が、略語の部分に表示されます。

HTML DOMの略語（Abbreviation）オブジェクトの使い方を解説

ポイント解説

  • document.getElementById()：指定したid属性を持つ要素を取得するメソッドです。
  • .title：要素のtitle属性の値を取得・設定できるプロパティです。
  • innerHTML：要素内のHTMLコンテンツを取得・変更するためのプロパティです。

このように、Abbreviationオブジェクトは通常のDOM要素と同じように操作できます。title属性を活用すれば、略語にマウスカーソルを合わせたときにツールチップとして正式名称を表示させることもできるため、ユーザーにとって分かりやすいWebページ作りに役立ちます。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注