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

HTML DOM citeオブジェクトとは？引用要素の作成方法をサンプルコードで解説

HTML DOMのciteオブジェクトは、HTMLの<cite>要素に関連付けられたオブジェクトです。<cite>要素は、引用した創作物への参照（出典）を示すために使用され、作品名を必ず含める必要があります。参照できる創作物は、絵画、書籍、テレビ番組、映画など多岐にわたります。

構文

citeオブジェクトを作成する構文は以下の通りです。

var x = document.createElement("CITE");

サンプルコード

それでは、HTML DOM citeオブジェクトの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックすると、CITE要素が生成されます。</p>
<button onclick="createCite()">CREATE</button><br><br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/800px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" width="220" height="277" alt="The Starry night">
<script>
    function createCite() {
        var x = document.createElement("CITE");
        var t = document.createTextNode("The Starry night.");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM citeオブジェクトとは？引用要素の作成方法をサンプルコードで解説

「CREATE」ボタンをクリックします。

HTML DOM citeオブジェクトとは？引用要素の作成方法をサンプルコードで解説

コードの解説

この例では、まず<img>タグを使って画像を挿入しています。

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/800px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" width="220" height="277" alt="The Starry night">

次に、createCite()メソッドを実行するための「CREATE」ボタンを配置しています。

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

createCite()メソッドが呼び出されると、<cite>要素が生成され、変数xに代入されます。続いて、テキストを格納したテキストノードが作成され、変数tに代入されます。そして、appendChild()メソッドを使って、このテキストノードが変数xの<cite>要素に追加されます。最後に、document.bodyに対してappendChild()メソッドを実行することで、テキストノードを含んだ<cite>要素がドキュメントのbodyに追加されます。

  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 ではサポートされていないため注