querySelectorAllでブラウザにテキストを反映できない

JavaScriptでquerySelectorAllを用いて、ブラウザにテキスト表示させようとしていますが、

HTML
1<body>
2
3  <ul id="aiueo">
4    <li class="hoge1">カテゴリ1</li>
5    <li class="hoge2">カテゴリ2</li>
6    <li class="hoge3">カテゴリ3</li>
7  </ul>
8
9 <script src ="js/practice.js"></script>
10
11</body>

js
1{
2  const list = document.querySelector('#aiueo');
3  list.innerHTML ="サンプル";
4 );
5}

まず上記のquerySelectorの方では、

サンプル

とブラウザに表示できました。しかし、

HTML
1  <ul id="aiueo">
2    <li class="hoge1">カテゴリ1</li>
3    <li class="hoge2">カテゴリ2</li>
4    <li class="hoge3">カテゴリ3</li>
5  </ul>
6
7 <script src ="js/practice.js"></script>
8
9</body>

js
1{
2  const list = document.querySelectorAll('#aiueo');
3  list.innerHTML ="サンプル";
4 );
5}

上記のquerySelectorAllで表示させようとすると、

カテゴリ1
カテゴリ2
カテゴリ3

と元のHTMLのテキストが表示されてしまいます。

自分としては、

サンプル
サンプル
サンプル

と表示されると思ったのですが、どの点がいけないのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

querySelectorAllはその名前の通り、複数の要素が取れうるものなので、返り値は個々のエレメントではなく、それを束ねた配列のようなものです。書き換える際にはforやforEachなどで回して1つずつ処理する必要があります。

あと、document.querySelectorAll('#aiueo')で取れるのは外側の<ul id="aiueo">です。中身の<li>ではありません。

投稿2020/06/16 10:38

maisumakun

総合スコア146018

ylc

2020/06/16 10:45 編集

ご丁寧に回答いただきありがとうございます。それではjsの方で、 { const list = document.querySelectorAll('.hoge1 .hoge2 .hoge3'); list.forEach( x => { x.innerHTML = "サンプル"; }); } と記述をしましたが、これでもブラウザではカテゴリ1 カテゴリ2 カテゴリ3 となってしまいます。どの点がおかしいのでしょうか…？