sintaxe não explicada

Exemplo de elemento com data-id

<li class="item" data-id="00">

QuerySelector:

document.querySelector( " [data-id=' " + item.id + " '] " )

O código poderia ter sido escrito de outra forma, mas as aspas duplas internas são as aspas duplas que estão na tag HTML. Coloquei em negrito a parte que vem depois do = na tag HTML. Os sinais de + são apenas pra concatenação.

document.querySelector("[data-id='"+item.id+"']")

Para exemplificar o porque tantas aspas, quando escrevemos um querySelector com um data attribute precisamos escrever ele da seguinte forma:

document.querySelector("[data-id]")

no lugar do ID podemos escrever algo como columns ou parents ou como muitos utilizam o exemplo de fazer um carro poderia ser data-marca exemplo:

document.querySelector("[data-marca]")

mas quando temos mais de uma "marca" ou "id" colocamos especificamente qual a "marca" ou qual o "id" que ele leva para assim diferenciar ele dos outros que levam o mesmo data attribute "id" e encontrarmos somente ele. neste caso temos vários itens com:

<li class="item" data-id="00">

só mudando o valor do "id" dele. assim quando vamos construir esse código confuso temos que passar o identificador do data attribute que por si só contem

document.querySelector("[data-]")

adicionamos o nome do nosso data atribute que seria o "id":

document.querySelector("[data-id=

e para finalizar ele temos que concatenar o valor do "id" que esta dentro da variável "item.id", sendo assim montamos toda a estrutura:

document.querySelector("[data-id=' ']")

e para concatenar temos que abrir um espaço entre as aspas simples, o melhor jeito é fechar logo após ela e abrir logo após a variável:

document.querySelector("[data-id='" + item.id + "']")

lembrando que o "+" serve para juntar a primeira parte com a segunda concatenando ela. (no caso não é uma soma e sim uma junção). espero que tenha ajudado