queryselectorAllで特定の文字から始まるclassのみを取り出す

以前、document.queryselectorAllでnotを使った。

今回は特定の文字から始まる要素を取り出す方法について調べた。

下記のようなlistがある時に、itemから始まる要素を取り出したい場合、

<ul>
  <li class="item-sasfas">Item1</li>
  <li class="item-klvsda">Item2</li>
  <li class="item-fsdjhs">Item3</li>
</ul>

以下のように指定すれば取得できる。

document.querySelectorAll('[class^="item"]')

参考

• Attribute selectors - CSS: Cascading Style Sheets | MDN