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

HTML DOM blockquoteオブジェクトの使い方をわかりやすく解説

HTML DOMのblockquoteオブジェクトは、HTMLの<blockquote>要素を表すオブジェクトです。<blockquote>要素は、<q>タグと異なり、引用符（クォーテーションマーク）を自動的に付加しない点が特徴です。このblockquoteオブジェクトを利用することで、<blockquote>要素のプロパティへのアクセスや、動的な要素の作成が可能になります。

構文

blockquoteオブジェクトを作成する場合の基本的な構文は以下の通りです。

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

documentオブジェクトのcreateElement()メソッドに「BLOCKQUOTE」を指定することで、新しい<blockquote>要素を生成できます。

サンプルコード

ここでは、ボタンをクリックするとblockquoteオブジェクトが作成され、ページに表示される簡単な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックしてblockquoteオブジェクトを作成してください</p>
<button onclick="createBloc()">CREATE</button>
<script>
    function createBloc() {
        var x = document.createElement("BLOCKQUOTE");
        var t = document.createTextNode("これはランダムな引用文です。サンプルテキストです。");
        x.setAttribute("cite", "https://www.examplesite.com");
        x.setAttribute("id", "myQuote");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

実行結果

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

HTML DOM blockquoteオブジェクトの使い方をわかりやすく解説

ボタンをクリックすると、以下のように<blockquote>要素がページに追加されます。

HTML DOM blockquoteオブジェクトの使い方をわかりやすく解説

コードの解説

このサンプルコードの処理内容を順番に見ていきましょう。

1. ボタンの設置

まず、クリックイベントでcreateBloc()関数を呼び出す「CREATE」ボタンを配置しています。

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

2. createBloc()関数の処理

createBloc()関数内では、documentオブジェクトのcreateElement()メソッドを使って<blockquote>要素を生成しています。続いて、createTextNode()メソッドで表示用のテキストノードを作成します。

さらに、setAttribute()メソッドを使用することで、生成した<blockquote>要素に対してcite属性やid属性などの属性を設定しています。

最後に、appendChild()メソッドを使って、作成した<blockquote>要素をdocumentのbodyに子要素として追加し、画面に反映させています。

function createBloc() {
    var x = document.createElement("BLOCKQUOTE");
    var t = document.createTextNode("これはランダムな引用文です。サンプルテキストです。");
    x.setAttribute("cite", "https://www.examplesite.com");
    x.setAttribute("id", "myQuote");
    x.appendChild(t);
    document.body.appendChild(x);
}

まとめ

blockquoteオブジェクトを使えば、JavaScriptから動的に<blockquote>要素を生成し、属性の設定やテキストの追加も自由に行えます。createElement()、createTextNode()、setAttribute()、appendChild()といったDOM操作の基本メソッドを組み合わせることで、柔軟な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 ではサポートされていないため注