2021-07-10

JavaScript: getElementsByTagName()で複数のタグを指定できる？

JavaScriptのgetElementsByTagName()メソッドの引数に、 複数のタグを同時に指定することはできるのでしょうか？

早速試してみましょう。

[toc]

getElementsByTagName()に複数要素を指定してみる

次のように、p要素２つ、div要素2つのHTMLを用意します。

<p>コンテンツp1</p>

<p>コンテンツp2</p>

<div>コンテンツdiv1</div>

<div>コンテンツdiv2</div>

getElementsByTagName()の引数として「'p', 'div'」の２つを同時に指定します。

let elems = document.getElementsByTagName('p', 'div');

for (let i = 0; i < elems.length; i++){
	console.log(elems[i].textContent);
}

console.log(elems);


// 実行結果 -------------

コンテンツp1
コンテンツp2

HTMLCollection(2) [p, p]

実行結果からわかるように、1番目の引数の要素だけが取得できます。

2番目の引数は無視されています。

エラーにはならないようです。

結論としては、

複数のタグを同時に指定した場合、最初のタグだけが認識されます。

代替方法: querySelectorAll()メソッド

もし、同時に取得したい場合は、

getElementsByTagName()ではなく、 querySelectorAll()メソッドを使えば取得できます。

let elems = document.querySelectorAll('p, div');

for (let i = 0; i < elems.length; i++){
	console.log(elems[i].textContent);
}

console.log(elems);


// 実行結果 ------------

コンテンツp1
コンテンツp2
コンテンツdiv1
コンテンツdiv2
NodeList(4) [p, p, div, div]

まとめ

・getElementsByTagName()に複数のタグを指定しても、最初のタグしか取得できません。

・複数タグを同時に取得したい場合は、querySelectorAll()メソッドを使います。