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

HTML DOM の aside オブジェクトとは？作成方法と使い方を実例付きで解説

HTML DOM の aside オブジェクトは、HTML ドキュメント内の <aside> 要素を表すオブジェクトです。<aside> 要素は、本文とは独立した補足情報やサイドバーなどのコンテンツをマークアップするために使用されます。

JavaScript を使えば、この aside オブジェクトを動的に生成し、ページに追加することができます。

aside オブジェクトの作成方法

aside オブジェクトを作成するには、document.createElement() メソッドを使用します。

構文

document.createElement("ASIDE");

引数として要素名「ASIDE」を渡すことで、新しい <aside> 要素が生成されます。

aside オブジェクトの使用例

次のサンプルコードでは、ボタンをクリックすると <aside> 要素が動的に作成され、ページに追加される仕組みを確認できます。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        background-color: #fff;
        color: #0197F6;
    }
    h1 {
        color: #23CE6B;
    }
    .btn {
        background-color: #fff;
        border: 2px solid #0197F6;
        height: 2rem;
        width: 40%;
        margin: 2rem auto;
        display: block;
        color: #0197F6;
        outline: none;
        cursor: pointer;
        border-radius: 20px;
    }
    aside {
        border: 1.5px solid #db133a;
        padding: 20px;
    }
</style>
<body>
<h1>DOM aside Object Demo</h1>
<button onclick="createAside()" class="btn">Create a aside object</button>
<script>
    function createAside() {
        var asideElement = document.createElement("ASIDE");
        asideElement.innerHTML = 'I\'m an aside element<h3>This is a h3 element inside an aside element</h3><p>This is a paragraph element inside an aside element</p>';
        document.body.appendChild(asideElement);
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

HTML DOM の aside オブジェクトとは？作成方法と使い方を実例付きで解説

ここで「Create a aside object」ボタンをクリックしてみましょう。

クリックすると、createAside() 関数が呼び出され、新しい <aside> 要素が生成されてページの末尾に追加されます。作成された要素には、見出し（h3）や段落（p）が含まれており、赤い枠線で囲まれた補足コンテンツとして表示されます。

HTML DOM の aside オブジェクトとは？作成方法と使い方を実例付きで解説

ポイントまとめ

  • document.createElement("ASIDE") で <aside> 要素を動的に作成できる
  • innerHTML プロパティを使えば、作成した要素の中身（子要素やテキスト）を自由に設定できる
  • appendChild() メソッドで、生成した要素をドキュメントに追加する

このように、HTML DOM の aside オブジェクトを活用することで、補足情報やサイドバーコンテンツをユーザーの操作に応じて動的に表示することが可能になります。

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