Как выбрать элементы, имя класса которых начинается с определенного слова?

Question

Моя цель, например, состоит в том, чтобы выбрать элементы, у которых есть класс, начинающийся со слова "child-1".

var childs = document.querySelectorAll("#child-" + i);

Этот код позволяет выбрать только имя класса "child-x".

<li class="child-1-5">
<li class="child-1-8">
<li class="child-1-9">

Как выбрать элементы, начинающиеся с Child1?

Answer 1

Вы можете использовать CSS подстановочные знаки для этого:

const children = document.querySelectorAll('[class^="child-"], [class*=" child-"]');
console.log(children);

<li class="child-1-5">
<li class="child-1-8">
<li class="child-1-9">
<li class="some classes child-1-10 to make noise">

Ссылка MDN

Answer 2

Это должно работать:

var childs = document.querySelectorAll("li[class^='child-1']");

Если вы хотите динамически выбрать первое число с вашим параметром, просто перейдите к переменной:

var i = 1;
var childs = document.querySelectorAll("li[class^='child-" + i + "']");

<li class="child-1-5">5
<li class="child-1-8">8
<li class="child-1-9">9