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

HTML DOM Footerオブジェクトとは？使い方とサンプルコードを解説

HTML DOM Footerオブジェクトとは

HTML DOMのFooterオブジェクトは、HTMLの<footer>要素に対応するオブジェクトです。<footer>要素はHTML5で新たに導入されたセマンティックタグ（意味を持つタグ）の一種で、Webページやセクションの末尾に配置されるフッター領域を表します。一般的には、著作権表示、作者情報、関連リンクなどを記述するために使用されます。

Footerオブジェクトを利用することで、documentオブジェクトのcreateElement()メソッドを使って新しい<footer>要素を動的に作成したり、getElementById()メソッドを使って既存の<footer>要素を取得して操作したりすることが可能です。

構文

以下が基本的な構文です。

footerオブジェクトを作成する場合：

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

サンプルコード

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

<!DOCTYPE html>
<html>
<head>
<script>
    function createFoot() {
        var f = document.createElement("FOOTER");
        document.body.appendChild(f);
        var p = document.createElement("P");
        var txt = document.createTextNode("Copyright ©, 2019");
        p.appendChild(txt);
        f.appendChild(p);
    }
</script>
</head>
<body>
<h1>Footer object example</h1>
<p>Create a footer for this webpage by clicking the below button</p>
<button onclick="createFoot()">CREATE</button>
</body>
</html>

実行結果

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

HTML DOM Footerオブジェクトとは？使い方とサンプルコードを解説

「CREATE」ボタンをクリックすると、フッターが動的に追加されます。

HTML DOM Footerオブジェクトとは？使い方とサンプルコードを解説

コードの解説

上記の例では、以下のような処理を行っています。

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

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

createFoot()関数の中では、documentオブジェクトのcreateElement()メソッドを使って<footer>要素を生成し、appendChild()メソッドでbody要素の子ノードとして追加しています。続いて、同じくcreateElement()メソッドで<p>要素を作成します。

さらに、documentオブジェクトのcreateTextNode()メソッドで「Copyright ©, 2019」というテキストノードを生成し、appendChild()メソッドを使って段落要素に追加します。最後に、テキストを含んだ段落全体を、appendChild()メソッドによって<footer>要素の子ノードとして追加しています。

function createFoot() {
    var f = document.createElement("FOOTER");
    document.body.appendChild(f);
    var p = document.createElement("P");
    var txt = document.createTextNode("Copyright ©, 2019");
    p.appendChild(txt);
    f.appendChild(p);
}

押さえておきたいポイント

  • <footer>要素はHTML5から導入されたセマンティック要素であり、検索エンジンやスクリーンリーダーにとって意味のある構造を提供します。
  • 1つのページ内に複数の<footer>要素を配置することも可能です（セクションごとに設置できます）。
  • 既存の<footer>要素を取得したい場合は、getElementById()やquerySelector()などのメソッドを使用します。
  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 ではサポートされていないため注