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

HTML DOMのHeading（見出し）オブジェクトとは？作成・操作方法を実例で解説

HTML DOMのHeadingオブジェクトは、HTMLの見出し要素である<h1>から<h6>までに関連付けられたオブジェクトです。このHeadingオブジェクトを利用することで、createElement()メソッドを使って新しい見出し要素を動的に作成したり、getElementById()メソッドを使って既存の見出し要素へアクセスしたりすることができます。

構文

Headingオブジェクトの基本的な構文は以下のとおりです。

Headingオブジェクトの作成

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

引数には作成したい見出しレベル（"H1"〜"H6"）を文字列で指定します。

サンプルコード

それでは、Headingオブジェクトを使った具体的な例を見てみましょう。ボタンをクリックすると、新しい<h1>要素がページに追加される仕組みです。

<!DOCTYPE html>
<html>
<body>
<h1>Heading object example</h1>
<p>Create a h1 element by clicking the below button</p>
<button onclick="createH1()">CREATE</button>
<script>
    function createH1() {
        var h = document.createElement("H1");
        var txt = document.createTextNode("H1 element has been created");
        h.appendChild(txt);
        document.body.appendChild(h);
    }
</script>
</body>
</html>

出力結果

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

HTML DOMのHeading（見出し）オブジェクトとは？作成・操作方法を実例で解説

そして「CREATE」ボタンをクリックすると、新しい<h1>見出しがページの下部に追加されます。

HTML DOMのHeading（見出し）オブジェクトとは？作成・操作方法を実例で解説

コードの解説

このサンプルでは、以下のような流れで処理が行われています。

まず、「CREATE」ボタンを配置し、ユーザーがクリックしたタイミングでcreateH1()関数が呼び出されるように設定しています。

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

createH1()関数内では、まずdocumentオブジェクトのcreateElement()メソッドを使って<h1>見出し要素を生成し、変数hに代入します。続いて、createTextNode()メソッドで表示用のテキストノードを作成します。このテキストノードは、appendChild()メソッドによって<h1>要素の子ノードとして追加されます。最後に、もう一度appendChild()メソッドを呼び出し、テキストを含んだ<h1>要素全体をドキュメントのbodyに子要素として追加しています。

function createH1() {
    var h = document.createElement("H1");
    var txt = document.createTextNode("H1 element has been created");
    h.appendChild(txt);
    document.body.appendChild(h);
}

まとめ

Headingオブジェクトを使えば、JavaScriptから動的に見出し要素を生成できます。ポイントは次の3つです。
① createElement("H1")で見出し要素を作成する
② createTextNode()でテキストノードを作り、appendChild()で見出しに追加する
③ 完成した見出し要素をappendChild()でbodyなど目的の場所に挿入する
この手順を応用すれば、ユーザーの操作に応じてコンテンツを柔軟に書き換える動的なWebページを構築できます。

  1. HTML DOM Titleオブジェクトとは？textプロパティの使い方をわかりやすく解説

    HTML DOM Titleオブジェクトの概要HTML DOM の Title オブジェクトは、HTML ドキュメント内の <title> 要素を表すオブジェクトです。このオブジェクトを利用することで、JavaScript からページのタイトルを動的に取得したり変更したりすることが可能になります。<title> 要素の作成方法新しい <title> 要素を作成するには、document.createElement() メソッドを使用します。var titleObject = document.createElement(TITLE)ここで作成した「title

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

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