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

HTML DOMの太字（Bold）オブジェクトとは？基本構文とサンプルコードを解説

HTML DOMの太字オブジェクトとは

HTML DOMの太字（Bold）オブジェクトは、HTMLの<b>タグ（太字タグ）に関連付けられたオブジェクトです。<b>タグは、タグで囲まれたテキストを太字で表示するために使用されます。この太字オブジェクトを利用することで、JavaScriptからHTMLの<b>要素にアクセスし、動的に生成・操作することが可能になります。

構文

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

太字オブジェクトの作成

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

document.createElement()メソッドに引数として"B"を渡すことで、新しい<b>要素がメモリ上に生成されます。この時点ではまだ画面には表示されず、後述のようにappendChild()などでドキュメントに追加する必要があります。

サンプルコード

それでは、HTML DOMの太字オブジェクトを使用した具体的な例を見てみましょう。以下のコードでは、ボタンをクリックすると、テキストを含んだ<b>要素が動的にページへ追加されます。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックすると、テキストを含んだ <b> 要素が生成されます</p>
<button onclick="createBold()">CREATE</button>
<br><br>
<script>
    function createBold() {
        var x = document.createElement("B");
        var t = document.createTextNode("SAMPLE BOLD TEXT");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

コードの解説

  • document.createElement("B")：新しい<b>要素を作成します。
  • document.createTextNode()：表示するテキストノード「SAMPLE BOLD TEXT」を生成します。
  • x.appendChild(t)：作成したテキストノードを<b>要素の子として追加します。
  • document.body.appendChild(x)：<b>要素をbodyに追加することで、画面上に太字テキストが表示されます。

実行結果

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

HTML DOMの太字（Bold）オブジェクトとは？基本構文とサンプルコードを解説

「CREATE」ボタンをクリックすると −

HTML DOMの太字（Bold）オブジェクトとは？基本構文とサンプルコードを解説

ボタンをクリックした直後に、「SAMPLE BOLD TEXT」という文字列が太字でページに追加表示されます。このように、太字オブジェクトを使えばユーザーの操作に応じて、リアルタイムに太字テキストを動的に生成できます。

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