【Javascript】getElementsByNameの使い方

今回の記事は、

  • JavascriptでDOMを扱いたい
  • getElementsByNameの使い方が知りたい

というお悩みをお持ちの方に向けた記事になっています。

JavascriptではDOM要素を取得する際に様々なメソッドが用意されていますが、今回はその中でも「getElementsByName」メソッドについてご紹介していきます。

一度覚えてしまえば様々な場面で応用可能ですので、ぜひこの機会にマスターしておきましょうね。


JavaScriptを学び直すなら最新の第7版がおすすめ


2022年ITエンジニア大賞を受賞した話題本



JavascriptでHTML要素を取得する方法

Javascriptを使うと、ユーザーのアクションに応じたコンテンツの表示、ブラウザ上での地図表示やグラフィックアニメーションの表示といった、動的なWebページ作成が可能となります。

Javascriptの主な役割は下記の通りです。

  • Webページで表示するHTMLコンテンツを変更することができる
  • HTMLコードそのものを変更することができる
  • HTMLコンテンツの表示・非表示ができる
  • CSSで指定する文字の大きさや色などが変更できる

そんなJavascriptでHTML要素を取得する方法を紹介します。

そもそもHTML要素とは、マークアップ言語のうち、タグ(tag) を用いてWeb上に記述できる要素のことを指し、例えば下記の要素が挙げられます。

  • <h1>などの開始タグ
  • </h1>などの終了タグ
  • <br/>などの空要素タグ

このように、HTML要素では、タグ(tag)でテキストなどを囲んだ見出しや段落などが構成されます。

Javascriptを使うと動的なWebサイトが作成できますが、そのためにはHTML要素を取得しなければなりません。JavascriptでHTML要素を取得する方法には、下記の方法が挙げられます。

  • getElementById
  • getElementsByName
  • getElementsByClassName
  • querySelector

まずは、これらJavascriptでHTML要素を取得する方法の概要を下表にまとめます。

方法特徴
getElementById ・ID属性から要素を取得
・複数存在する場合は最初の要素のみを取得
getElementsByName ・name属性から要素を取得
・name属性がlinkの要素をまとめて取得することができる
getElementsByClassName ・クラス属性を指定して要素を取得
・該当する複数の要素を取得すること可能
querySelector ・IDとクラスのどちらを入れても要素の取得が可能
・一致する要素がない場合は「null」を返す

「getElementsByName」「getElementsByClassName」は「getElements」と複数形表記となっていますが、ID名から取得する「getElementById」だけ複数形表記ではないため注意してください。

getElementsByNameの使い方

次に、本題である「getElementsByName」の使い方について解説します。

name属性とは?

「getElementsByName」では、name属性から要素を取得します。

そもそも、name属性には、フォーム・フレーム・コントロール・オブジェクトなどの要素で名前を指定可能です。また、この属性が使用できる主な要素を下記に列挙します。

  • button 要素
  • fieldset 要素
  • form 要素
  • iframe 要素
  • img 要素
  • input 要素
  • keygen 要素
  • map 要素
  • meta 要素
  • object 要素
  • output 要素
  • param 要素
  • select 要素
  • textarea 要素

基本的な使い方

ここでは、getElementsByNameの基本的な使い方を実例で解説します。name属性の値を指定して要素を取得する書式は、下記のとおりです。

document.getElementsByName(name)
※name=name属性値

JavascriptでHTML要素を取得するために「getElementsByName」を用いるケースは、フォーム内の同じname属性を持つ要素を取得する場合が一般的です。そのため、「getElementById」や「getElementsByClassName」と比べて、使用するケースは限定されます。

getElementByIdとの違い

 JavascriptでHTML要素を取得する方法として、「getElementsByName」と使い方を間違えやすい要素に「getElementById」があります。

「getElementsByName」はgetElements、「getElementById」はgetElementというように「s」の違いがみられることから、それぞれ複数形と単数形で定義されています。「getElementsByName」と「getElementById」の違いについての概要を、下表にまとめます。

要素名特徴の違い
getElementsByName ・取得される値がname属性
・複数定義できる
getElementById ・取得される値がID属性
・複数定義できない

また、「getElementsByName」は、指定した属性の値を持つ要素が見つからなかった場合、 nullではなく、 lengthが0の「NodeList(IEやEdgeだとHTMLCollection)」が返ってくるという違いもみられます。

【応用編】getElementsByNameを使って入力値を取得してみよう

それでは、実際に「getElementsByName」を使って入力値を取得してみましょう。

実装コード

<form name="type1">
  <input name="textBox1" type="text" />
  <input type="button" value="val" onclick="onButtonClick();" />
</form>
<div id="output"></div>

<script type="text/javascript" language="javascript">
function onButtonClick() {
  let target = document.getElementById("output");
  let input = document.getElementsByName("textBox1");
  target.innerText = input[0].value;
}
</script>

動作確認用


上記を実行すると、テキストボックスが表示されます。そして、その表示されたテキストボックスに値や文字列を入力して「valボタン」をクリックすると、上部のエリアに入力した値や文字列が表示される仕組みです。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptのgetElementsByNameの使い方について解説してきましたがいかがでしたか?

こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。


JavaScriptを学び直すなら最新の第7版がおすすめ


2022年ITエンジニア大賞を受賞した話題本