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

HTML DOM select要素のnameプロパティとは？取得・変更方法を実例付きで解説

HTML DOM の name プロパティは、HTMLドキュメント内のドロップダウンリスト（<select> 要素）に設定された name 属性の値を取得および変更するために使用されます。フォーム送信時のデータ識別などに役立つ重要な属性です。

nameプロパティの基本構文

name属性の値を取得する場合

object.name

name属性の値を変更する場合

object.name = "text"

設定する値には任意の文字列（テキスト）を指定できます。

実装例：select要素のnameプロパティを使ってみよう

それでは、実際に HTML DOM の select 要素の name プロパティを使用したサンプルコードを見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.2rem;
    }
    .drop-down{
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:8px;
        outline:none;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Select nameプロパティのサンプル</h1>
<p>好きな科目を選択してください：</p>
<select class='drop-down' name="Drop Down List">
<option>物理</option>
<option>数学</option>
<option>化学</option>
<option>英語</option>
</select>
<button onclick="showName()" class="btn">nameを表示</button>
<div class="show"></div>
<script>
    function showName() {
        var dropDown = document.querySelector(".drop-down");
        var showMsg = document.querySelector(".show");
        showMsg.innerHTML="こんにちは！私は " + dropDown.name + " です";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM select要素のnameプロパティとは？取得・変更方法を実例付きで解説 

この状態で「nameを表示」ボタンをクリックすると、JavaScript の showName() 関数が実行され、ドロップダウンリストの name 属性の値が画面に出力されます。

HTML DOM select要素のnameプロパティとは？取得・変更方法を実例付きで解説

コードのポイント解説

  • document.querySelector()：クラス名「drop-down」を指定して select 要素を取得しています。
  • dropDown.name：select 要素の name 属性の値（この例では "Drop Down List"）を取得します。
  • innerHTML：取得した name の値を div 要素内に動的に表示しています。

このように、name プロパティを使えば JavaScript から簡単に select 要素の name 属性を読み取ったり、書き換えたりすることが可能です。フォーム操作や動的なWebアプリケーション開発において頻繁に活用されるので、ぜひ覚えておきましょう。

  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」ボタン