【中学生でもわかる】JavaScriptの「getElementsByTagName()」

こんにちは、フローです。

今回は、JavaScriptの「getElementsByTagName()」

について書いていきたいと思います。

これを使えば、ウェブページから特定のタグを持つ要素を簡単に取得できます。

1 getElementsByTagName()とは？
- 1.1 どんな時に使うのか？
- 1.2 getElementsByTagName()の使い方
2 getElementsByTagName()の注意点
3 まとめ

getElementsByTagName()とは？

その名の通りHTMLタグの名前を指定して、該当するすべての要素を取得するための関数です。

この関数が返すのは、

「HTMLCollection」という特殊なオブジェクトで、

その中には指定したタグを持つすべての要素が格納されています。

どんな時に使うのか？

ウェブページにはたくさんの要素があり、それぞれには異なるタグが付けられています。

たとえば、

見出しには<h1>タグ、

段落には<p>タグ、

リンクには<a>タグが使われます。

getElementsByTagName()は、これらの特定のタグを持つ要素をすべて取得したいときに使います。

getElementsByTagName()の使い方

それでは具体的なコード例を見てみましょう。

タグ名で要素を取得する

var elements = document.getElementsByTagName('p');

上記のコードは、ウェブページから<p>タグ（段落）を持つすべての要素を取得します。

取得した要素に対して処理を行う

var elements = document.getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'blue';
}

上記のコードは、<p>タグを持つすべての要素の文字色を青に変更します。

特定の要素だけに処理を行う

var elements = document.getElementsByTagName('p');
elements[0].style.color = 'blue';

上記のコードは、<p>タグを持つ要素の中で最初のものだけの文字色を青に変更します。

getElementsByTagName()の注意点

getElementsByTagName()を使う際の注意点は、存在しないタグ名を指定した場合です。

存在しないタグ名を指定すると、

空のHTMLCollectionが返されます。

そのため、取得した要素に対して処理を行うことはできません。

// このタグは存在しないため、エラーになる
var elements = document.getElementsByTagName('nonexistentTag');
elements[0].style.color = 'blue';

上記のコードでは、存在しないタグ名を指定しているため、エラーが発生します。

まとめ

今回はJavaScriptで特定のタグを持つ要素を取得する方法、

getElementsByTagName()について学びました。

ウェブページ内の特定の要素に対して処理を行いたい場合に非常に便利な関数です。

しかし、存在しないタグ名を指定するとエラーになるため、

常に指定するタグ名が正しいことを確認することが重要です。

JavaScriptの学習は、一つ一つの関数を理解し、

どのように使うのかを把握することが大切です。

これからも皆さんの学習が進むように、

分かりやすい解説を心がけていきますので、ぜひ次回もお楽しみに！

レッツチャレンジ！

カテゴリー