JavaScript　name属性をキーに要素を取得するgetElementsByNameメソッドの使い方

JavaScriptでname属性をキーに要素を取得するgetElementsByNameメソッドの使い方について解説します。

name属性をキーに要素を取得する方法を教えてください！

getElementsByNameメソッドを使えば、name属性をキーに要素を取得することができます。

getElementsByNameメソッドとは？

　getElementsByNameメソッドは、HTMLのname属性値をキーに要素を取得することができます。このメソッドは複数の要素を取得することができますので、複数の要素を一括で操作することができます。

getElementsByNameメソッドの使い方

getElementsByNameメソッドは、documentオブジェクトから呼び出すことができます。

　getElementsByNameメソッドには、取得したい要素のname属性値を引数として渡します。また、取得した要素は配列のようなオブジェクトであり、各要素にアクセスするためには配列のインデックスを使います。

次のような記述をすることで、HTMLのname属性値が「sample」の要素を取得することができます。

var elements = document.getElementsByName("sample");

　取得した要素は配列のようなオブジェクトです。各要素にアクセスするためには、配列のインデックスを使用します。次のような記述をすることで、取得した要素の1つ目にアクセスすることができます。

elements[0].value = "Hello World";

　このように、getElementsByNameメソッドを使うことで、HTMLのname属性をキーに要素を取得することができます。取得した要素を操作することで、HTMLの要素を動的に変更することができます。

サンプルプログラムを使った解説

以下のサンプルプログラムでは、name属性値が「sample」のinput要素を取得し、値を「Hello World」に変更する例を示します。

<input type="text" name="sample" value="">
<input type="text" name="sample" value="">
<input type="text" name="sample" value="">

<script>
  var elements = document.getElementsByName("sample");
  for (var i = 0; i < elements.length; i++) {
    elements[i].value = "Hello World";
  }
</script>

　このサンプルでは、HTMLに3つのテキストボックスがあります。

　JavaScriptでは、getElementsByNameメソッドを使って、name属性が「sample」のテキストボックスを取得します。for文を使って、取得した各テキストボックスにアクセスし、「Hello World」という値を設定しています。

　このように、getElementsByNameメソッドを使ってHTMLのname属性をキーに要素を取得することができます。取得した要素を操作することで、HTMLの要素を動的に変更することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

この記事のまとめ

name属性をキーに要素を取得するgetElementsByNameメソッドの使い方について解説しました。

getElementsByNameメソッドを使ってname属性から要素を取得することができました！

他にもHTMLの要素を取得する方法がありますので、様々な方法を学ぶことでスキルアップすることができます。