JavaScript　HTMLのタグをキーに要素取得するgetElementsByTagNameの使い方

JavaScriptのgetElementsByTagNameメソッドを使って、HTMLのタグ名をキーに要素を取得する方法を解説します。

タグ名をキーにHTML要素を取得することってできますか？

getElementsByTagNameメソッドを使うと、タグ名をキーにHTML要素を取得することができます。

getElementsByTagNameメソッドとは

　getElementsByTagNameメソッドは、HTMLの要素を取得するためのJavaScriptのメソッドです。
このメソッドを使用することで、指定されたタグ名を持つ要素を取得することができます。

　このメソッドは、documentオブジェクトを使って呼び出すことができます。指定されたタグ名を持つ要素を取得するには、以下のように記述します。

document.getElementsByTagName(“タグ名”)

例えば、以下のようなHTMLがあった場合

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

次のようにgetElementsByTagNameメソッドを使用することで、「p」タグを取得することができます。

<script>
  var paragraphs = document.getElementsByTagName("p");
  for (var i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].innerHTML);
  }
</script>

このプログラムを実行すると、以下のような結果がコンソールに出力されます。

Paragraph 1
Paragraph 2
Paragraph 3

　このメソッドで取得した要素は「HTMLCollection」というオブジェクトで格納されます。「HTMLCollection」は配列のようなメソッドを持っていませんが、for文などを使って要素にアクセスすることができます。

また、「HTMLCollection」は実行中にDOMの中身が変更された場合も「HTMLCollection」も自動的に更新されます。

指定された親要素内からタグ名を持つ要素を取得する

　getElementsByTagNameメソッドは、指定されたタグ名を持つ要素を全て取得するのではなく、指定された親要素内からタグ名を持つ要素を取得することもできます。

例えば、以下のようなHTMLがあった場合

<div id="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

　次のようにgetElementByIdメソッドとgetElementsByTagNameメソッドを使用することで、「#container」要素内にある「p」タグを取得することができます。

<script>
  var container = document.getElementById("container");
  var paragraphs = container.getElementsByTagName("p");
  for (var i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].innerHTML);
  }
</script>

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

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

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

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

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

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

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

この記事のまとめ

getElementsByTagNameメソッドを使って、HTMLのタグ名をキーに要素を取得する方法を解説しました。

「getElementsByTagNameメソッド」は、HTMLの要素をタグ名をキーに取得することができる。
「document」オブジェクトを使って「getElementsByTagName(“タグ名”)」と記述することで、指定されたタグ名を持つ要素を取得することができる。
取得した要素は「HTMLCollection」というオブジェクトで格納され、「for文」などを使って要素にアクセスすることができる。
「HTMLCollection」は、実行中にDOMの中身が変更された場合も「HTMLCollection」も自動的に更新される。