未捕获的 DOMException：无法在“文档”上执行“querySelector”：“”不是有效的选择器

Question

我有一个包含两个项目的列表。第二项的 ID 由 getTime() 生成并与 new$ 连接，形成一个随机 ID，如下图所示。

我需要定位该元素以执行某些功能，但是当我尝试使用 querySelector 执行此操作时，它会产生一个错误，指出它不是有效的选择器，即使我使用 String() 将生成的随机数转换为字符串。

我在这里错过了什么？

原文由 DohaHelmy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 # 语法选择具有特定 ID 的元素不允许在 ID 中使用未转义的 $ s。您可以通过 [id="<some id>"] 选择父元素来绕过它：

 console.log(
  document.querySelector('[id="foo$bar"] .item')
);

 <div id="foo$bar">
  <div class="item">
    item
  </div>
</div>

或者首先使用反斜杠转义 $ ：

 const idSelector = 'foo$bar'.replace(/\$/g, '\\$');
console.log(
  document.querySelector('#' + idSelector + ' .item')
);

 <div id="foo$bar">
  <div class="item">
    item
  </div>
</div>

原文由 CertainPerformance 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试这个 ：

 document.querySelector("[id='your-id-here-with-special-char']")

应该管用。让我知道

原文由 rivelbab 发布，翻译遵循 CC BY-SA 4.0 许可协议