document.querySelector 不能在 id 中使用“=”符号

Question

在元素中使用特定类型的 id 时，我遇到了document.querySelector() function 错误。 当 id 为canvas-=时，querySelector 失败并出现错误 -> 无法在 'Document' 上执行 'querySelector'：'#canvas-=' 不是有效的选择器。

但是当我使用document.getElementById()时，它可以工作。 我可以在 querySelector 中使用"[id='canvas-=']"但是为什么它在document.querySelector("#canvas-=")上失败了？

document.querySelector("#canvas-=")

 <.DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p id="canvas-=">This is a paragraph.</p> <script> const elem = document;querySelector("#canvas-="). console.log(elem;innerHTML); </script> </body> </html>

document.getElementById("canvas-=")

 <.DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p id="canvas-=">This is a paragraph.</p> <script> const elem = document;getElementById("canvas-="). console.log(elem;innerHTML); </script> </body> </html>

但是，如果我从 id 中删除= ，一切正常。 插入它以任何方式都不起作用。 ==- , =- , -=所有这些都会产生错误。 那么这里的=符号有什么问题，为什么第二种方法有效但第一种方法无效？

Answer 1

querySelector方法使用 CSS3 选择器来查询 DOM。

这意味着

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 ( _); 它们不能以数字、两个连字符或一个连字符后跟一个数字开头。

显然你有= 。 所以没有=它工作正常。

 <.DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p id="canvas-">This is a paragraph.</p> <script> const elem = document;querySelector("#canvas-"). console.log(elem;innerHTML); </script> </body> </html>

更多关于它。 https://www.w3.org/TR/CSS21/syndata.html#characters结帐主题 4.1.3

Answer 2

那么这里的=符号有什么问题
document.querySelector("#canvas-=")

如querySelector文档中所述：

要匹配不遵循标准 CSS 语法（例如不恰当地使用冒号或空格）的 ID 或选择器，您必须使用反斜杠（“ \ ”）转义字符。 由于反斜杠也是 JavaScript 中的转义字符，因此如果输入文字字符串，则必须对其进行两次转义（一次用于 JavaScript 字符串，另一次用于querySelector() ）：

工作演示：

 const elem = document.querySelector("#canvas-\\="); console.log(elem.innerHTML);

 <h1>This is a Heading</h1> <p id="canvas-=">This is a paragraph.</p>

为什么第二种方法有效而第一种方法无效？

发生这种情况是因为getElementById()没有使用相同的 CSS3 选择器来查询 DOM，因此我们可以毫无问题地使用特殊字符。

工作演示：

 const elem = document.getElementById("canvas-="); console.log(elem.innerHTML); const elem2 = document.getElementById("canvas.foo"); console.log(elem2.innerHTML);

 <h1>This is a Heading</h1> <p id="canvas-=">This is a paragraph.</p> <p id="canvas.foo">This is a 2nd paragraph.</p>

document.querySelector 不能在 id 中使用“=”符号

问题描述

2 个解决方案

解决方案1
2 2020-05-25 07:17:36

解决方案2
2 已采纳 2020-05-25 07:22:24

document.querySelector 不能在 id 中使用“=”符号

问题描述

2 个解决方案

解决方案1 2 2020-05-25 07:17:36

解决方案2 2 已采纳 2020-05-25 07:22:24

解决方案1
2 2020-05-25 07:17:36

解决方案2
2 已采纳 2020-05-25 07:22:24