getElementsByNameの使い方【JavaScript】

2020年10月7日

この記事では「getElementsByName」を触ってみます。

「getElementById」と名前は似ていても働きは違うので、慣れていない人は覚えておきましょう。

getElementsByNameの使い方

getElementsByName() メソッドは、指定したnameを持つ要素のNodeListコレクションを返します。

例えば下記のようなラジオボタンのHTMLがあったとします。

<label><input type="radio" name="trip" value="hokkaido">北海道</label>
<label><input type="radio" name="trip" value="okinawa">沖縄</label>
<label><input type="radio" name="trip" value="tokyo">東京</label>

以下のようにconsole.logを表示させてみます。

  var rdo_name = document.getElementsByName('trip');
  console.log(rdo_name.item(0).value);
  console.log(rdo_name.item(0).name);
  console.log(rdo_name.item(0).type);

すると、上から順に下記のように出力されます。

// 結果
hokkaido
trip
radio

getElementsByNameを使ってチェック済のラジオボタンの色を変更する方法も紹介していますので、チェックしてみてください。

下記のような動作です。

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。