QuerySelector 无法识别带有空格的 #id

Question

我正在使用querySelectorfetchdiv来滚动该位置。

const anchor = document.querySelector('#' + i) 
 if (anchor) {
      anchor.scrollIntoView(true);
      window.scrollBy(0, -190); 
    }

问题是，在某些 div 中，我的 id 带有空格，例如 Vegan Pizza（变量 i），在这种情况下，变量anchor是null并且滚动不起作用。

任何人都知道如何使 querySelector 与带有空格的 id 一起使用？

Answer 1

空格是后代选择器。例如：

#container div

将选择一个div其祖先的 id 为container某处的，例如下面的 div：

<section id="container">
  <div></div>
</section>

改用[id="some id with spaces"]：

const anchor = document.querySelector('[id="' + i + '"]') ;

您还可以使用getElementById：

#container div

<section id="container">
  <div></div>
</section>

但最好避免在 ID 中添加空格 - 即使浏览器可以识别它（使用此解决方法），它在技术上也是无效的。考虑删除 ID 中的所有空格，或者将值放入不同的属性（如数据集）中。