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

HTML DOM Fieldsetオブジェクトとは？プロパティと使い方を解説

HTML DOMのFieldsetオブジェクトは、HTMLの<fieldset>要素を表すオブジェクトです。<fieldset>要素は、フォーム内の関連する入力項目をグループ化するために使用され、JavaScriptからこのオブジェクトを操作することで、動的にフォームの制御や情報の取得が可能になります。

Fieldsetオブジェクトのプロパティ

Fieldsetオブジェクトには、以下のプロパティが用意されています。

プロパティ説明
disabledfieldsetが無効化されているかどうかを設定または取得します
form該当するfieldsetを含むform要素への参照を返します
namefieldsetのname属性の値を設定または取得します
typefieldset要素のタイプを返します

構文

Fieldsetオブジェクトの主な操作方法は以下のとおりです。

fieldset要素を作成する

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

サンプルコード

ここで、HTML DOM Fieldsetオブジェクトの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<script>
    function createField() {
        var f = document.createElement("FIELDSET");
        var txt = document.createTextNode("FIELDSET element created");
        f.appendChild(txt);
        document.body.appendChild(f);
    }
</script>
</head>
<body>
<h2>Fieldset object example</h2>
<p>Create a fieldset element by clicking on below button</p>
<button onclick="createField()">CREATE</button> <br><br>
</body>
</html>

実行結果

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

HTML DOM Fieldsetオブジェクトとは？プロパティと使い方を解説

CREATEボタンをクリックすると、以下のようにfieldset要素が動的に生成されます。

HTML DOM Fieldsetオブジェクトとは？プロパティと使い方を解説

コードの解説

このサンプルコードの動作を順を追って説明します。

まず、クリックされるとcreateField()関数を実行するCREATEボタンを配置しています。

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

createField()関数では、documentオブジェクトのcreateElement()メソッドを使って<fieldset>要素を生成し、変数fに代入しています。続いて、createTextNode()メソッドでテキストノードを作成し、appendChild()メソッドを使ってそのテキストノードを<fieldset>要素の子ノードとして追加します。最後に、テキストノードを子に持つfieldset要素を、documentのbodyの子要素として追加しています。

function createField() {
    var f = document.createElement("FIELDSET");
    var txt = document.createTextNode("FIELDSET element created");
    f.appendChild(txt);
    document.body.appendChild(f);
}

このように、Fieldsetオブジェクトを活用することで、JavaScriptからフォームのグループ化要素を自由に操作できるようになります。disabledプロパティと組み合わせれば、特定の条件で入力項目群を一括して無効化するといった実装も簡単に行えます。

  1. HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object

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

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