SyntaxError: Не удалось выполнить 'querySelectorAll' для 'Document': '# 0.resizer' не является допустимым селектором

Question

Я пытаюсь выполнить querySelectorAll на моей веб-странице, используя javascript, но когда я пытаюсь получить его, используя div id в качестве параметра поиска, он получает эту ошибку:

SyntaxError: Не удалось выполнить 'querySelectorAll' в 'Document': '# 0.resizer' не является допустимым селектором.

Я использую html5 и reactjs, в чем может быть проблема?

Вот строка кода:

alert(document.querySelectorAll("#" + id + ".resizer"));

Решения?

Answer 1

Настоящая проблема здесь в том, что селектор идентификатора # не может начинаться с цифры. Вы должны избежать этого:

test( '#1.foo' ); // fail
test( '#' + CSS.escape('1') + '.foo' ); // works
test( '#\\31.foo' ); // works


function test( selector ) {
  let pass = false;
  try {
    const elem = document.querySelector( selector );
    pass = elem.textContent === "hi";
  } catch(e) {
    pass = false;
  }
  console.log( selector, pass );
}

<div id="1" class="foo">hi</div>

Answer 2

Очень трудно сказать, в чем может быть проблема, но, как я могу предположить, в настоящее время на основе вашего селектора. Сгенерированная разметка должна выглядеть следующим образом:

<div id="0" class="resizer">...</div>

Но если она похожа на:

<div id="0.resizer">...</div>

Тогда вы должны экранировать ., поскольку оно имеет особое значение в css. Обозначает селектор класса. Таким образом, вы должны избежать этого, как:

 document.querySelectorAll("#" + id + "\.resizer")
 //document.querySelectorAll(`#${id}\.resizer`) // <---es6 template variable