Webページの構築に欠かせないJavaScript。この記事では、JavaScriptを用いてHTMLの特定のタグ名を持つ要素を効率的に取得するgetElementsByTagNameメソッドの使い方を詳しく解説します。
getElementsByTagNameメソッドとは？
getElementsByTagNameは、指定されたタグ名を持つ要素をその文書内での発見順に並べたHTMLCollectionを返すJavaScriptのメソッドです。このメソッドは、Documentオブジェクトにも、個々のElementオブジェクトにも使用できます。
element.getElementsByTagName(tagName)- element : このメソッドを呼び出すElementオブジェクトまたはDocumentオブジェクト。
- tagName : 取得したい要素のタグ名。大文字・小文字を区別せずにマッチします。全ての要素を取得するには “*” を指定します。
すべての特定のタグ名の要素を取得する
Webページ内のすべての<p>（パラグラフ）要素を取得し、それぞれのテキスト内容をコンソールに出力する例を見てみましょう。
const pElements = document.getElementsByTagName("p");
for (let i = 0; i < pElements.length; i++) {
console.log(pElements[i].textContent);
}このコードによって、ページ内のすべての<p>要素が取得され、それぞれのテキスト内容がコンソールに出力されます。
特定の要素内のタグを取得する
id属性が”exampleDiv”である<div>要素内の全ての<span>要素を取得する例を以下に示します。
const divElement = document.getElementById("exampleDiv");
const spanElements = divElement.getElementsByTagName("span");
for (let i = 0; i < spanElements.length; i++) {
console.log(spanElements[i].textContent);
}このコードによって、指定した<div>要素内のすべての<span>要素が取得され、それぞれのテキスト内容がコンソールに出力されます。
注意点として知っておきたいこと
生きた（Live）コレクション
getElementsByTagNameで取得されるのはHTMLCollectionオブジェクトであり、これは生きた（live）コレクションです。これは、DOMが変更されたときにコレクションも自動的に更新されるという意味です。これにより、コレクションを変更しながらループを回すと予期せぬ動作が発生する場合があります。
特定の条件でのフィルタリング
getElementsByTagNameはすべての要素を取得します。特定の条件を元に要素をフィルタリングする場合は、代わりにquerySelectorAllメソッドを使うと便利です。
まとめ
getElementsByTagNameメソッドは、特定のタグ名を持つ要素を簡単かつ効率的に取得するための強力なツールです。特にページ内で一定のタグをまとめて操作したい場合には、このメソッドが大変便利です。
この記事を通じて、getElementsByTagNameメソッドの使い方とその活用例について理解を深めることができたでしょうか。次回のWebページ制作時には、是非このメソッドを活用して、効率的なコーディングを目指してみてください。
この記事例は、getElementsByTagNameメソッドの基本的な使用方法を中心に構成されており、見出しを設けることで情報を整理し、読み手が理解しやすい内容になるように工夫しています。
