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

HTML DOM DFNオブジェクトとは？定義要素の作成方法をサンプルコード付きで解説

HTML DOMのDFNオブジェクトは、HTMLの<dfn>要素に対応するオブジェクトです。<dfn>要素内に記述されたテキストは、その前後の文脈において「定義される用語」であることを示します。DFNオブジェクトを使うことで、この<dfn>要素をJavaScriptから動的に生成・操作できるようになります。

構文

DFNオブジェクトを作成する基本的な構文は以下のとおりです。

var p = document.createElement("DFN");

サンプルコード

ここでは、HTML DOM DFNオブジェクトの具体的な使用例を見ていきましょう。ボタンをクリックすると、テキストを含んだ<dfn>要素がページ上に動的に追加される仕組みです。

<!DOCTYPE html>
<html>
<body>
<h2>DFNオブジェクトのサンプル</h2>
<p>下のボタンをクリックすると、テキストを含んだdfn要素が作成されます。</p>
<button onclick="dfnCreate()">CREATE</button> <br><br>
<script>
    function dfnCreate() {
        var x = document.createElement("DFN");
        var t = document.createTextNode("定義要素です");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず「CREATE」というボタンが表示されます。

このボタンをクリックすると、<dfn>要素が本文中に追加され、「定義要素です」というテキストが斜体で表示されます。

コードの解説

まず、クリックされるとdfnCreate()関数を実行するCREATEボタンを作成しています。

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

dfnCreate()メソッドでは、documentオブジェクトのcreateElement()メソッドを使って<dfn>要素を生成します。続いて、createTextNode()メソッドでテキストノードを作成し、appendChild()メソッドによってそのテキストノードを<dfn>要素の子ノードとして追加します。

最後に、テキストノードを含んだ<dfn>要素全体を、appendChild()メソッドでdocument.body（ドキュメントの本文）の子要素として追加することで、画面上に定義用語が表示される仕組みです。

function dfnCreate() {
    var x = document.createElement("DFN");
    var t = document.createTextNode("定義要素です");
    x.appendChild(t);
    document.body.appendChild(x);
}

このように、HTML DOMのDFNオブジェクトを活用すれば、定義用語を表す<dfn>要素をJavaScriptで自由に操作できます。Webページ内の専門用語やキーワードを動的に強調表示したい場合などに役立つでしょう。

  1. HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object

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

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