【JavaScript】getElementsByTagName()で指定したタグ名のHTML要素を取得する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年12月10日に投稿されました。)

JavaScriptで指定したHTML要素を取得する方法としてgetElementsByTagName()があります。

getElementsByTagName()とはタグ名を指定してHTML要素にアクセスするメソッドになります

パラメータにタグ名を指定することで該当するすべてのHTML要素をコレクションとして取得します。

そのため、getElementsByTagName()で取得したコレクションに対してitem()を使用するとHTML要素を取得できます。

そのため、「複数の要素から特定の要素を取得したい場合」や「該当するHTML要素をまとめて取得したい場合」などにはgetElementsByTagName()を使用しましょう。

今回はJavaScriptのgetElementsByTagName()で指定したタグ名のHTML要素を取得する方法について紹介していきます。

この記事はこんな方におすすめ
・タグ名を指定してHTML要素を取得したい場合
・タグ名を指定してHTML要素を複数取得したい場合

getElementsByTagName()とは

getElementsByTagName()とはタグ名を指定してHTML要素にアクセスするメソッドになります。

アクセスするHTML要素は1つだけでなく、マッチする要素全てが対象となります。

getElementsByTagName()の書き方

getElementsByTagName()の書き方は下記のようになります。

documentの後ろにgetElementsByTagName()と追記し、括弧内にパラメータを指定します。

getElementsByTagName()のパラメータ

getElementsByTagName()のパラメータは下記のようになります。

  1. タグ名(必須):
    アクセスしたいHTML要素をタグ名で指定する

getElementsByTagName()は必須なパラメータとして、「タグ名」を指定します。

getElementsByTagName()の返り値

getElementsByTagName()の返り値は「指定したタグのHTML要素のコレクション」となります。

そのため、HTML要素を取得したい場合はitem()を使用します。

getElementsByTagName()で指定したタグのHTML要素を取得するサンプルコード

getElementsByTagName()で指定したタグのHTML要素を取得するサンプルコードについてご紹介します。

ここでは、下記の3つのパターンでgetElementsByTagName()を使用します。

  1. 指定するタグのHTML要素が存在する場合
  2. 指定するタグのHTML要素が存在しない場合
  3. 指定するタグのHTML要素が重複して存在する場合

指定するタグのHTML要素が存在する場合

指定するタグのHTML要素が存在する場合にgetElementsByTagName()を使用します。

● index.html

● main.js

実行結果

指定するタグのHTML要素が存在する場合にgetElementsByTagName()を使用した結果

getElementsByTagName()よって指定したタグのHTML要素を取得しています。

そのため、「pタグ」の「名古屋地下鉄東山線」が表示されています。

指定するタグのHTML要素が存在しない場合

指定するタグのHTML要素が存在しない場合にgetElementsByTagName()を使用します。

● index.html

● main.js

実行結果

指定するタグのHTML要素が存在しない場合にgetElementsByTagName()を使用した結果

指定するタグのHTML要素が存在しない場合は、HTML要素を取得することができません。

そのため、「null」が表示されています。

指定するタグのHTML要素が重複して存在する場合

指定するタグのHTML要素が複数存在する場合にgetElementsByTagName()を使用します。

● index.html

● main.js

実行結果

指定するタグのHTML要素が重複して存在する場合にgetElementsByTagName()を使用した結果

指定するタグのHTML要素が複数存在する場合、getElementsByTagName()は該当するものすべてのHTML要素を取得するようになります。

そのため、item()にインデックスを指定するとHTML要素を選択することができます。

今回は0番目と2番目を指定したため、「pタグ」の「名古屋地下鉄東山線」と「名古屋地下鉄名城線」が表示されています。

getElementsByTagName()で指定したタグのHTML要素を複数取得する場合

getElementsByTagName()で指定したタグのHTML要素を複数取得する場合はfor文を使用します。

for文とは、指定した回数分繰り返すして処理を行うことができる文法になります。

つまり、getElementsByTagName()で取得した要素をfor文で繰り返して取り出すことで、指定したタグのHTML要素を複数取得することができるようになります。

● index.html

● main.js

実行結果

getElementsByTagName()で指定したタグのHTML要素を複数取得した結果

for文によってgetElementsByTagName()で指定したタグのHTML要素を複数取得しています。

また、lengthによってコレクションの長さ(データ数)を取得しています。

そのため、今回はコレクションの長さ分、繰り返し処理を行ったことから「pタグ」の要素が全て表示されています。

もし、lengthについて詳しく知りたい場合は下記の記事をご参考ください。

getElementsByTagName()で取得するHTML要素の範囲を設定する場合

getElementsByTagName()で取得するHTML要素の範囲を設定する場合は、documentを親ノードに変更します。

getElementsByTagName()は指定したタグ名に該当する全てのHTML要素を取得します。

しかし、documentを親ノードに変更することで、親要素内を範囲としてタグ名に該当するHTML要素を取得するようになります。

● index.html

● main.js

実行結果

getElementsByTagName()で取得するHTML要素の範囲を設定した結果

getElementsByTagName()のdocumentに親ノードを指定することで、親要素の中のHTML要素のみを取得しています。

そのため、「stationArea」クラスの要素内にある「pタグ」の「大須観音」、「鶴舞」、「荒畑」、「川名」、「いりなか」のみが表示されています。

Sossy

documentを指定してgetElementsByTagName()を使用すると「栄」や「中村日赤」、「日比野」も取得されますが、今回は「stationArea」クラスの要素外であるため取得されていません。

getElementsByTagName()を使用したケース

getElementsByTagName()を使用したケースについてご紹介します。

例えば、地下鉄の路線名の横にプラスボタンをそれぞれ追加します。

● index.html

● style.css

● main.js

実行結果

getElementsByTagName()でプラスボタンを追加して各路線の駅名を表示した結果

getElementsByTagName()によって路線名の横にプラスボタンが追加され、ボタンを押すことで路線の駅が表示されています

また、プラスボタンはcreateElement()を使用して作成しています。

もし、createElement()について詳しく知りたい場合は下記の記事をご参考ください。

Sossy

ボタンやテキストのデザインはBootStrapを使用しています。

HTML要素を取得できる他のメソッドの一覧

getElementsByTagName()以外にもHTML要素を取得できるメソッドが存在します。

そのため、ここではHTML要素を取得できる他のメソッドの一覧についてご紹介します。

id名を指定してHTML要素を取得する場合

id名を指定してHTML要素を取得する場合は、getElementById()を使用します。

getElementById()とは、id属性を指定してHTML要素にアクセスするメソッドになります。

● index.html

● main.js

実行結果

getElementById()で指定したid属性のHTML要素を取得した結果

getElementById()によって指定したid属性のHTML要素を取得しています。

そのため、「pタグ」の「station3クラス」が付与されている「荒畑」が表示されています。

もし、getElementById()について詳しく知りたい場合は下記の記事をご参考ください。

class名を指定してHTML要素を取得する場合

class名を指定してHTML要素を取得する場合は、getElementsByClassName()を使用します。

getElementsByClassName()とは、class属性を指定してHTML要素にアクセスするメソッドになります。

● index.html

● main.js

実行結果

getElementsByClassName()で指定したclass属性のHTML要素を取得した結果

 

getElementsByClassName()によって指定したclass属性のHTML要素を取得しています。

そのため、「pタグ」の「station3クラス」が付与されている「荒畑」が表示されています。

セレクタを指定してHTML要素を取得する場合

セレクタを指定してHTML要素を取得する場合は、querySelector()を使用します。

querySelector()とは、セレクタを指定してHTML要素にアクセスするメソッドになります。

セレクタはタグやid、classの属性など、どれを指定しても構いません。

● index.html

● main.js

実行結果

querySelector()でセレクタを指定してHTML要素を取得した結果

querySelector()によって、セレクタを指定してHTML要素を取得しています。

そのため、タグ名で指定した「名古屋地下鉄鶴舞線」やクラス名で指定した「名古屋地下鉄名港線」、id名で指定した「名古屋地下鉄東山線」が表示されています。

もし、querySelector()について詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ getElementsByTagName()とはタグ名を指定してHTML要素にアクセスするメソッドである

⚫︎ getElementsByTagName()は下記のパラメータを指定する
・タグ名(必須)

⚫︎ 指定するタグのHTML要素が存在する場合にgetElementsByTagName()を使用すると、「要素のコレクション」を返す
(item(0)を使用してHTML要素を取得する)

⚫︎ 指定するタグのHTML要素が存在しない場合にgetElementsByTagName()を使用すると、「null」を返す

⚫︎ 指定するタグのHTML要素が重複して存在する場合にgetElementsByTagName()を使用すると、「要素のコレクション」を返す
(item(インデックス)を使用してHTML要素を取得する)

⚫︎ getElementsByTagName()で指定したタグのHTML要素を複数取得する場合はfor文を使用する

⚫︎ getElementsByTagName()で取得するHTML要素の範囲を設定するにはdocumentを親ノードに変更する

⚫︎ id名を指定してHTML要素を取得するにはgetElementById()を使用する

⚫︎ class名を指定してHTML要素を取得するにはgetElementsByClassName()を使用する

⚫︎ セレクタを指定してHTML要素を取得するにはquerySelector()を使用する