複数個のhtml要素を取得して、ボタンで文字色を変えたい

getElementByIdで、classNameが"summary-content"の要素を
取得して、CSSで色付けをしたいんだが、1個しか取ってこれない。

getElementByIdで複数個の要素を取れない？

同じidを持つ複数要素を取得しようとしていたが、それがHTMLの原理に沿わないらしい。

そもそものHTMLの原理として、そのような目的ではidではなくclassを使うべきです。

javascript - getElementByIdで同時多数取得 - スタック・オーバーフロー

なるほど。確かにそうか。

querySelectorAllを使うのが良さそうか？

let elements = document.querySelectorAll('.content');
console.log(elements)

何も表示されないので、取得できていないみたい。どうして。
spanタグだからだめってことはないよな。

➡︎ li要素にクラスを追加して、それに対してquerySelectorAllを使ったらいけた。

let elements = document.querySelectorAll('.summary-contents');
for (let i = 0; i < elements.length; i += 1) {
    elements[i].classList.toggle('color-gray');
}

↑ 灰色で見えづらくできた。