class名やタグ名のようなHTML文書内に複数存在する可能性がある要素を取得した場合に、メソッドは配列風のオブジェクトを返します。
配列風のオブジェクトとなるため、取得した要素ノード群に対して一括でイベントや処理を実装する際には、ループと組み合わせることになります。
$document.querySelectorAll( 'CSSセレクタ' );$
querySelectorAll( ) は、引数に指定したCSSセレクタに一致したすべての要素のリスト（NodeList）を返します。
querySelectorAll( )は、Document以外にも、querySelector( )で取得したElementオブジェクトもメソッドとして用意されており、 documentだと文書全体から一致する対象となるが、querySelector( )で取得したオブジェクトでquerySelectorAll( )を使うと、親要素の中に含まれる要素となります。 そのため、「ある範囲の中にある対象要素」と対象を絞ることが可能となります。
Document.querySelectorAll() - Web API | MDN
<aside> 💡 NodeListは、配列ではないがforEach( )メソッドが用意されています。
</aside>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Web演習２ - サンプル７</title>
</head>
<body>
<h1>JavaScript</h1>
<p>クライアントサイドの動的なウェブサイト構築が可能になります。</p>
<div>
<input type="text" id="todo_text" placeholder="予定を入力してください">
<button type="button" id="btn_save">登録</button>
</div>
<h2>ToDo List</h2>
<ul id="todo_list">
<li class="item">item1</li>
<li class="item">item1</li>
<li class="item">item1</li>
</ul>
<script src="sample07.js"></script>
</body>
</html>
{
const todoList = document.querySelector( '#todo_list' );
const todoListItems = todoList.querySelectorAll( '.item' );
console.log( todoListItems );
}