querySelectorAllで取得した要素に対してmapとかを使う #JavaScript

はじめに

querySelectorAllで取得した要素に対して、Array関数を利用したいとします。

html.example.html

<html>
	<body>
		<div class="sample">
			sample1
		</div>
		<div class="sample">
			target!
		</div>
		<div class="sample">
			sample3
		</div>
		<div class="sample">
			sample4
		</div>

		<script>
			window.onload = () => {
				// 内部テキストが「target!」の要素だけを抽出する
				const sampleArray = document.querySelectorAll('.sample')
				const target = sampleArray.filter(elem => elem.innerText == 'target!');
			}
		</script>
	</body>
</html>

こんな感じでfilterを使えば余裕！
・・・かと思いきや。

Uncaught TypeError: sampleArray.filter is not a function at window.onload (example.html:19:32)

エラーが発生しました。ｱﾚｪ?

説明

querySelectorAllで要素を取得したときの返り値の型はNodeListというものになります。
Document: querySelectorAll() メソッド - Web API | MDN

そしてこのNodeList、ドキュメントに「NodeList は Array とは異なります」と明記されています。
そのためfilterやmapなどの便利な関数が使えません。

対応方法

こうする。

example.html

<html>
	<body>
		<div class="sample">
			sample1
		</div>
		<div class="sample">
			target!
		</div>
		<div class="sample">
			sample3
		</div>
		<div class="sample">
			sample4
		</div>

		<script>
			window.onload = () => {
				// 内部テキストが「target!」の要素だけを抽出する
				const sampleArray = document.querySelectorAll('.sample')
				// const target = sampleArray.filter(elem => elem.innerText == 'target!');

				// 下記2つのどちらでも問題なし
				const target1 = Array.from(sampleArray).filter(elem => elem.innerText == 'target!');
				const target2 = [...sampleArray].filter(elem => elem.innerText == 'target!');
			}
		</script>
	</body>
</html>

書き方は違いますが、やってることとしてはどちらも同じでArrayに変換しているだけです。
個人的には[...sampleArray]のほうが好み。

おわりに

なんでこんな手間を掛けないといけないんだ・・。
普通にArray関数使える形にしろー！という気持ち。