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

HTML DOM ヘッダーオブジェクトの基本と使い方をサンプルコードで解説

HTML DOM ヘッダーオブジェクトとは

HTML DOM のヘッダーオブジェクトは、HTML5 で新たに導入された <header> 要素に関連付けられたオブジェクトです。このオブジェクトを利用することで、createElement() メソッドを使って <header> 要素を動的に作成したり、getElementById() メソッドを使って既存の <header> 要素にアクセスしたりすることができます。

構文

ヘッダーオブジェクトを作成するための構文は以下のとおりです。

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

サンプルコード

それでは、HTML DOM ヘッダーオブジェクトの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Header object example</h1>
<p>Create a header element by clicking the below button</p>
<button onclick="headerCreate()">CREATE</button>
<script>
    function headerCreate() {
        var h = document.createElement("HEADER");
        document.body.appendChild(h);
        var h2 = document.createElement("H2");
        var txt = document.createTextNode("h2要素を含むヘッダー要素が作成されました");
        h2.appendChild(txt);
        h.appendChild(h2);
    }
</script>
</body>
</html>

実行結果

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

HTML DOM ヘッダーオブジェクトの基本と使い方をサンプルコードで解説

「CREATE」ボタンをクリックすると、以下のようにヘッダー要素が動的に追加されます。

HTML DOM ヘッダーオブジェクトの基本と使い方をサンプルコードで解説

コードの解説

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

まず、ユーザーがクリックすると headerCreate() メソッドが実行される「CREATE」ボタンを配置しています。

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

headerCreate() メソッドの内部では、document オブジェクトの createElement() メソッドを使って header 要素を生成し、変数 h に代入しています。その後、document の body に対して appendChild() メソッドを呼び出し、header 要素を body の子要素として追加します。

同様に createElement() メソッドで <h2> 要素を作成し、さらに document オブジェクトの createTextNode() メソッドを使って表示用のテキストノードを生成しています。

生成したテキストノードは appendChild() メソッドによって <h2> 要素に追加されます。最後に、テキストノードを含んだ <h2> 要素が、appendChild() メソッドによって header 要素の子要素として追加され、画面上にヘッダーが表示される仕組みです。

function headerCreate() {
    var h = document.createElement("HEADER");
    document.body.appendChild(h);
    var h2 = document.createElement("H2");
    var txt = document.createTextNode("h2要素を含むヘッダー要素が作成されました");
    h2.appendChild(txt);
    h.appendChild(h2);
}

このように、DOM 操作を組み合わせることで、ページ読み込み後にヘッダー要素を自由に生成・追加できるのが HTML DOM ヘッダーオブジェクトの大きな特徴です。

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