HTML DOMのInput Buttonオブジェクトとは？作成方法と主なプロパティを解説
HTML DOM の Input Button オブジェクトは、type 属性が「button」に設定された input 要素を JavaScript から操作するためのオブジェクトです。このオブジェクトを利用することで、ボタンの値や有効・無効の状態などを動的に取得・変更することができます。
Input Button オブジェクトの作成方法
Input Button オブジェクトを作成するには、document.createElement() メソッドで INPUT 要素を生成し、続けて type 属性を設定します。
構文
var newButton = document.createElement("INPUT");
newButton.setAttribute("type", "value");
ここで value には「button」「submit」「reset」のいずれかを指定できます。それぞれ通常のボタン、送信ボタン、リセットボタンとして機能します。
Input Button オブジェクトの主なプロパティ
Input Button オブジェクトには、以下のようなプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
| autofocus | HTML 内の入力ボタンにおける autofocus 属性の値を取得・変更します。ページ読み込み時に自動的にフォーカスを当てるかどうかを制御できます。 |
| defaultValue | 入力ボタンのデフォルト値（初期値）を取得・変更します。 |
| disabled | disabled 属性の値を取得・変更します。true を設定するとボタンが無効化され、クリックできなくなります。 |
| form | 入力ボタンを囲んでいる form 要素への参照を返します。 |
| name | name 属性の値を取得・変更します。フォーム送信時のデータ識別に使用されます。 |
| type | 入力ボタンの種類を返します。「button」「submit」「reset」のいずれかです。 |
| value | value 属性の内容（ボタンに表示されるテキスト）を取得・変更します。 |
使用例
それでは、DOM Input Button オブジェクトの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックするたびに同じボタンの複製がページに追加されます。
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Input Button Object</title>
<style>
body{
text-align:center;
}
.btn{
display:block;
margin:1rem auto;
background-color:#db133a;
color:#fff;
border:1px solid #db133a;
padding:0.5rem;
border-radius:50px;
width:60%;
font-weight:bold;
}
.show-msg{
font-weight:bold;
font-size:1.4rem;
color:#ffc107;
}
</style>
</head>
<body>
<h1>Input Button Object Example</h1>
<input type="button" onclick="createReplica()" class="btn" value="Click to replicate me">
<div class="show-msg"></div>
<script>
function createReplica() {
var newButton = document.createElement("INPUT");
newButton.setAttribute("type","button");
newButton.setAttribute("class","btn");
newButton.setAttribute("value","Click to replicate me");
newButton.setAttribute("onclick","createReplica()");
document.body.appendChild(newButton);
}
</script>
</body>
</html>
出力結果
上記のコードを実行すると、次のような画面が表示されます。
「Click to replicate me」ボタンをクリックすると、createElement() によって新しいボタンが生成され、同じ見た目と動作を持つ複製がページに追加されます。
このように、Input Button オブジェクトを使えば、JavaScript だけでボタン要素を自由に生成・操作できるため、動的な UI の構築に非常に役立ちます。
-
HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注