addEventListenerを使うとエラーが起こる。

Question

前提・実現したいこと

タブを押すとそれに紐づいたセクションが開くコードを
Javascriptで書きたいと思っています。

発生している問題・エラーメッセージ

このようなエラーが出てしまいますが、原因が分かりません。

tab.js:81 Uncaught TypeError: tabBlock.addEventListener is not a function
at tab.js:81

該当のソースコード

【JS】

var tabBlock = document.querySelectorAll(".tab_wrapper .tab_block");

//タブに対してイベント設定
tabBlock.addEventListener("click", onClick);

function onClick(){
	
	var tabBlockLink = tabBlock.getAttribute("href");
	
	console.log("tabBlockLink");
	}

【html】

			<ul class="tab_area">
				<li><a class="tab_block tab_block_1" href="#tab_1"></a></li>
				<li><a class="tab_block tab_block_2" href="#tab_2"></a></li>
				<li><a class="tab_block tab_block_3" href="#tab_3"></a></li>
				<li><a class="tab_block tab_block_4" href="#tab_4"></a></li>
				<li><a class="tab_block tab_block_5" href="#tab_5"></a></li>
				<li><a class="tab_block tab_block_6" href="#tab_6"></a></li>
			</ul><!--/.tab_area -->
		</div><!--/.tab_wrapper -->

<section class="contents_wrapper">
			<section class="tab_page" id="tab_1">
				<div class="breadcrumb">
					<p>トップ		&gt;	企業情報	&gt;　<span>経営理念</span></p>
				</div><!--/.breadcrumb -->
				
				<section class="hope_wrapper">
					<div class="philosophy_wrapper">
						<h3>経営理念</h3>

-----以下略-----

【CSS】

	width: 156px;
}

.tab_wrapper .tab_block_1 {
	background: url("../images/Lbtn1_off.png") no-repeat;
	background-size: contain;
}

-----以下略-----

試したこと

tabBlock.addEventListener("click", function(){
....
});
のような書き方も試しましたがエラーが出てしまいます。
エラーコードも調べましたが、なぜエラーが起こるのか、
理由が分かりません。。

ご回答お願い致します。

Comments

[m.ts10806]

コードはマークダウンのcode機能にてご提示ください

[Keichi_Negishi]

失礼しました。今から修正します。

Answer 1

querySelectorAllを調べてみてください。
この関数の返り値は要素ではなく、要素の集合を表す NodeList です。

addEventListener は要素のメソッドであり、NodeList のメソッドではありません。

Comments

[Keichi_Negishi]

ご回答ありがとうございます。NodeListというのは要素の集合を表すのですね。
勉強になりました。

Answer 2

querySelectorAllはNodeListを返すので、addEventListenerはそれぞれの要素につける必要があります。

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

【JavaScript:簡単！便利なセレクタ querySelector と querySelectorAll の使い方 | siro:chro】
http://www.sirochro.com/note/js-queryselector-queryselectorall/

Comments

[Keichi_Negishi]

ご回答ありがとうございます。
ご丁寧にリンクまで貼って頂き助かります。

Answer 3

var tabBlock = document.querySelectorAll(".tab_wrapper .tab_block");で取れるものは、エレメントの集合（配列のようなもの）であって、直接addEventListenerをかけることはできません。

中身を1つ1つ取り出してaddEventListenerを行う必要があります。

Comments

[Keichi_Negishi]

ありがとうございます。
勉強になりました。

Answer 4

window イベントもご確認ください。
ページを開くと、window は次のようにイベントを発します。

1. DOMContentLoaded イベント（DOMを動的に操作する準備が整うタイミング）
2. load イベント（各種APIの初期化が完了したタイミング）

マウスのclickイベントを設定できるのは

window.addEventListener("DOMContentLoaded", function entryPoint() {
  // ここで 要素にclick イベントを定義
  tabBlock.addEventListener("click", onClick);
});

あるいは

window.addEventListener("load", function entryPoint() {
  // ここで 要素にclick イベントを定義
  tabBlock.addEventListener("click", onClick);
});

のように、entryPoint の内部になります。

Comments

[Keichi_Negishi]

ご丁寧に回答して頂きありがとうございます。
windowオブジェクトのDOMContentLoadedやLoadを使うと
ページを開いた時のイベントを設定できるのですね。
勉強になりました。