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

HTML DOMラベルオブジェクトとは？基本構文とプロパティを実例付きで解説

HTML DOM Labelオブジェクトとは

HTML DOMにおけるLabelオブジェクトは、HTML文書内の<label>要素を表すインターフェースです。<label>要素は、テキストボックスやチェックボックスといったフォーム部品に対して、説明文（ラベル）を関連付けるために使用されます。JavaScriptからこのオブジェクトを操作することで、ラベルの内容や紐付け先を動的に制御できます。

構文

Labelオブジェクトの基本的な構文は以下の通りです。

<label>要素を作成する

var labelObject = document.createElement("LABEL")

このようにdocument.createElement()メソッドを使えば、スクリプトから新しい<label>要素を動的に生成できます。

主なプロパティ

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

プロパティ説明
controlラベルに関連付けられたコントロール（フォーム部品）を返します
formラベルを含む親フォームへの参照を返します
htmlForlabel要素のfor属性の値を取得・設定します

使用例：htmlForプロパティ

それでは、Label htmlForプロパティの具体的な使用例を見てみましょう。次のサンプルでは、ボタンをクリックすると、ラベルのfor属性が「editorTwo」から「editorOne」へと切り替わる仕組みを実装しています。

<!DOCTYPE html>
<html>
<head>
<title>Label htmlFor</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Label-htmlFor</legend>
<label id="CurrentEditor" for="editorTwo">Current Editor:</label><br>
<input type="text" id="editorOne" placeholder="editorOne">
<input type="text" id="editorTwo" placeholder="editorTwo">
<input type="button" onclick="getEventData()" value="Change Editor">
<div id="divDisplay">Label for attribute set as editor two</div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var labelSelect = document.getElementById("CurrentEditor");
    function getEventData() {
        if(labelSelect.htmlFor === 'editorTwo'){
            divDisplay.textContent = 'Label for attribute set as editor one';
            labelSelect.htmlFor = 'editorOne';
        }
    }
</script>
</body>
</html>

このコードでは、まずgetElementById()でlabel要素と表示用のdiv要素を取得し、ボタンがクリックされたタイミングでgetEventData()関数が呼び出されます。関数内ではhtmlForプロパティの現在値を判定し、「editorTwo」であれば表示テキストを更新した上でfor属性を「editorOne」に変更しています。

実行結果

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

「Change Editor」ボタンをクリックする前：

HTML DOMラベルオブジェクトとは？基本構文とプロパティを実例付きで解説

「Change Editor」ボタンをクリックした後：

HTML DOMラベルオブジェクトとは？基本構文とプロパティを実例付きで解説

ボタンをクリックすると、ラベルのfor属性が動的に書き換わり、画面下のメッセージも更新されることが確認できます。このようにhtmlForプロパティを使えば、ラベルとフォーム部品の関連付けをJavaScriptから自由に制御可能です。

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