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

HTML DOM Articleオブジェクトとは？基本構文と実践サンプルコードをわかりやすく解説

HTML DOM の Article オブジェクトは、HTML5 で新たに導入された <article> 要素を JavaScript から操作するための仕組みです。<article> 要素は、文書内で独立した自己完結型のコンテンツ領域を表すセマンティック（意味的）タグの一つであり、ブログ記事、ニュース投稿、フォーラムのコメントなどに適しています。

Articleオブジェクトを作成する構文

JavaScript で新しい article 要素を動的に生成するには、document.createElement() メソッドを使用します。

var a = document.createElement("ARTICLE");

実践例：Articleオブジェクトの操作

それでは、HTML DOM の Article オブジェクトを使った具体的なサンプルコードを見ていきましょう。この例では、既存の記事のスタイルを変更する機能と、新しい記事要素を動的に追加する機能の両方を実装しています。

<!DOCTYPE html>
<html>
<body>
<h3>ARTICLE HEADING</h3>
<article id="ArticleObj">
<h1>Heading</h1>
<p>Sample Article Text</p>
</article>
<p>下のボタンをクリックすると、記事のサイズと色が変わります</p>
<button onclick="ChangeArticle()">CHANGE</button>
<button onclick="AddArticle()">ADD</button>
<script>
    function ChangeArticle() {
        var x = document.getElementById("ArticleObj");
        x.style.color = "green";
        x.style.fontSize = "25px";
    }
    function AddArticle() {
        var x = document.createElement("ARTICLE");
        x.setAttribute("id", "myArticle");
        document.body.appendChild(x);
        var heading = document.createElement("H1");
        var txt1 = document.createTextNode("Append Article");
        heading.appendChild(txt1);
        document.getElementById("myArticle").appendChild(heading);
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、まず見出しと段落を含む記事が表示されます。

HTML DOM Articleオブジェクトとは？基本構文と実践サンプルコードをわかりやすく解説

「CHANGE」ボタンをクリックすると、記事の文字色が緑色になり、フォントサイズが 25px に拡大されます。

HTML DOM Articleオブジェクトとは？基本構文と実践サンプルコードをわかりやすく解説

「ADD」ボタンをクリックすると、新しい見出しを持つ article 要素がページ末尾に追加されます。

HTML DOM Articleオブジェクトとは？基本構文と実践サンプルコードをわかりやすく解説

コードの解説

1. 記事要素の定義

まず、id 属性に「ArticleObj」を指定した <article> 要素を作成し、その中に見出し（h1）と段落（p）を配置しています。

<article id="ArticleObj">
<h1>Heading</h1>
<p>Sample Article Text</p>
</article>

2. 操作用ボタンの設置

次に、それぞれの関数を呼び出すための「CHANGE」ボタンと「ADD」ボタンを設置します。onclick イベントによって、クリック時に対応する関数が実行されます。

<button onclick="ChangeArticle()">CHANGE</button>
<button onclick="AddArticle()">ADD</button>

3. ChangeArticle() 関数：スタイルの変更

ChangeArticle() 関数では、getElementById() メソッドで id「ArticleObj」の要素を取得し、style プロパティ経由で文字色（color）とフォントサイズ（fontSize）を変更しています。

function ChangeArticle() {
    var x = document.getElementById("ArticleObj");
    x.style.color = "green";
    x.style.fontSize = "25px";
}

4. AddArticle() 関数：要素の動的追加

AddArticle() 関数では、以下の手順で新しい記事をページに追加しています。

  1. createElement("ARTICLE") で新しい article 要素を生成する
  2. setAttribute() メソッドで id「myArticle」を割り当てる
  3. appendChild() で article 要素を body に追加する
  4. createElement("H1") で見出し要素を作成する
  5. createTextNode() でテキストノードを生成し、見出しに追加する
  6. 最後に、テキストを含む見出しを id「myArticle」の article 要素に追加する
function AddArticle() {
    var x = document.createElement("ARTICLE");
    x.setAttribute("id", "myArticle");
    document.body.appendChild(x);
    var heading = document.createElement("H1");
    var txt1 = document.createTextNode("Append Article");
    heading.appendChild(txt1);
    document.getElementById("myArticle").appendChild(heading);
}

まとめ

HTML DOM の Article オブジェクトを活用することで、<article> 要素のスタイル変更や動的なコンテンツ追加を JavaScript だけで柔軟に行えます。セマンティックなマークアップと DOM 操作を組み合わせることで、アクセシビリティと保守性に優れた 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 ではサポートされていないため注