javascript - 如何选择在其 id 属性中具有反斜杠的元素

Question

在浏览官方文档时，我无法理解为了匹配第一个 div，他们是如何写四个反斜杠 (\) 的，在我看来应该有两个反斜杠。我找不到有效的逻辑原因

 <div id="foo\bar"></div>
 <div id="foo:bar"></div>
 document.querySelector('#foo\\\\bar');  // It matches the first div

Answer 1

这是由于浏览器对 id 属性中的反斜杠进行了转义。所以会变成

<div id="foo\\bar"></div>

因此，为了选择元素，我们需要提供 \\\\ 来选择元素。

var elements = document.querySelector('#foo\\\\bar');
console.log(elements);
var elements = document.querySelector('#foo\\bar');
console.log(elements);

<div id="foo\bar"></div>
<div id="foo:bar"></div>

根据评论更新您可以在以下链接中阅读有关此的更多信息:-

https://mathiasbynens.be/notes/css-escapes

https://www.w3.org/TR/CSS21/syndata.html#characters