JavaScript - getElementsByTagName()で複数のタグを指定できる?

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

早速試してみましょう。

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

HTML

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


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

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

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

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

JavaScript

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


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

for (var 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()メソッドを使えば取得できます。


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

for (var 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()メソッドを使います。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする