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

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

HTML DOMのButtonオブジェクトは、HTMLの<button>要素に対応するオブジェクトです。JavaScriptを使えば、ページ上のボタンの状態を取得・変更したり、動的に新しいボタンを生成したりすることができます。

Buttonオブジェクトの主なプロパティ

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

プロパティ説明
autofocusページ読み込み時に、そのボタンへ自動的にフォーカスが当たるかどうかを設定または取得します。
disabled対象のボタンが無効化されているかどうかを設定または取得します。
formそのボタンを含むフォームへの参照を返します。
formActionボタンのformAction属性の値を設定または取得します。
formEnctypeボタンのformEnctype属性の値を設定または取得します。
formMethodボタンのformMethod属性の値を設定または取得します。
formNoValidate送信時にフォームデータを検証するかどうかを設定または取得します。
formTargetボタンのformTarget属性の値を設定または取得します。
nameボタンのname属性の値を設定または取得します。
typeボタンの種類（type）を設定または取得します。
valueボタンの値（value）を設定または取得します。

構文

Buttonオブジェクトを作成する場合の構文は次の通りです。

var x = document.createElement("BUTTON");

サンプルコード

それでは、HTML DOMのButtonオブジェクトを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックしてBUTTON要素を作成してください</p>
<button onclick="buttonCreate()">CREATE</button>
<br><br>
<script>
    function buttonCreate() {
        var x = document.createElement("BUTTON");
        var t = document.createTextNode("NEW BUTTON");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

実行結果

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

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

「CREATE」ボタンをクリックすると、以下のように新しいボタンが追加されます。

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

コードの解説

上記の例では、まず「CREATE」と表示されるbutton要素を作成しています。このボタンは、クリックされるとbuttonCreate()関数を実行します。

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

buttonCreate()関数の中では、documentオブジェクトのcreateElement()メソッドを使ってbutton要素を生成し、変数xに代入しています。続いてcreateTextNode()メソッドで「NEW BUTTON」というテキストノードを作成し、変数tに格納します。このテキストノードtをappendChild()メソッドでボタン要素の子として追加した後、document.body.appendChild()メソッドによって、テキストを持つボタン全体をドキュメントのbodyに追加しています。

function buttonCreate() {
    var x = document.createElement("BUTTON");
    var t = document.createTextNode("NEW BUTTON");
    x.appendChild(t);
    document.body.appendChild(x);
}
  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 ではサポートされていないため注