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

HTML DOM Button nameプロパティとは？構文とサンプルコードで解説

HTML DOM の Button name プロパティは、<button> 要素の name 属性と関連付けられたプロパティです。このプロパティを使用することで、ボタンの name 属性の値を設定（変更）したり、取得（参照）したりすることができます。

name 属性は主にフォーム内で利用され、JavaScript を使って特定の要素を指定・選択する際に役立ちます。フォーム送信時には、この name の値がキーとしてサーバーへデータを渡すためにも使われます。

構文

name プロパティを設定する場合

buttonObject.name = name

ここで指定する値が、ボタンの新しい名前（name 属性の値）になります。

name プロパティを取得する場合

var btnName = buttonObject.name

サンプルコード

それでは、Button の name プロパティを使った具体的な例を見てみましょう。以下のコードでは、クリック操作によって既存ボタンの name 値を動的に変更しています。

<!DOCTYPE html>
<html>
<body>
<button id="button1" name="btn1">BUTTON</button>
<p>下のボタンをクリックすると、上のボタンの名前が変更されます。</p>
<button onclick="change()">CHANGE</button>
<p id="Sample"></p>
<script>
    function change() {
        document.getElementById("button1").name = "SECOND BUTTON";
        var x = document.getElementById("button1").name;
        document.getElementById("Sample").innerHTML = "新しいボタンの名前は " + x + " です";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM Button nameプロパティとは？構文とサンプルコードで解説

CHANGE ボタンをクリックすると、以下のようにボタンの name 値が変更され、その結果が画面に出力されます。

HTML DOM Button nameプロパティとは？構文とサンプルコードで解説

コードの解説

上記のサンプルでは、まず id が「button1」、name が「btn1」であるボタンを1つ作成しています。

<button id="button1" name="btn1">BUTTON</button>

次に、クリックされたときに change() メソッドを実行する CHANGE ボタンを作成しています。

<button onclick="change()">CHANGE</button>

change() 関数では、getElementById() を使って id「button1」のボタン要素を取得し、その name 属性の値を「SECOND BUTTON」に変更しています。その後、変更後の name 値を変数 x に代入し、最後に id「Sample」の段落要素の innerHTML を書き換えることで、結果を画面に表示しています。

function change() {
    document.getElementById("button1").name = "SECOND BUTTON";
    var x = document.getElementById("button1").name;
    document.getElementById("Sample").innerHTML = "新しいボタンの名前は " + x + " です";
}

このように、name プロパティを活用すれば、JavaScript からボタンの識別名を自由に読み書きできるため、フォーム処理や動的な UI 制御において非常に便利です。

  1. HTML DOM Textareaのnameプロパティとは？取得・設定方法を解説

    HTML DOM の Textarea name プロパティは、HTMLドキュメント内のテキストエリア（textarea）要素の name 属性の値を取得したり、新しい値を設定したりするために使用されます。フォーム送信時やJavaScriptでの要素参照において、name 属性は重要な役割を果たします。このプロパティを使えば、動的にその値を読み書きすることが可能です。構文Textarea name プロパティの基本的な構文は以下の通りです。1. name属性の値を取得する場合object.name2. name属性に値を設定する場合object.name = text使用例それでは、HTML

  2. HTML DOMのnameプロパティとは？構文と使い方を実例で解説

    HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン