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