javascript - 未捕获的 DOMException : Failed to execute 'querySelector' on 'Document' : '' is not a valid selector

Question

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

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

我在这里缺少什么？

Answer 1

使用 # 选择具有特定 ID 的元素语法不允许未转义的 $ s 位于 ID 内。您可以通过 [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>