111 是有效的 HTML id 属性还是 document.querySelector() 和 document.querySelectorAll() 正确抛出语法错误？

Question

给定

const  div = document.createElement("div");

div.id = 111;

document.body.appendChild(div);

try {
  console.log(document.querySelector("#111"));
} catch(e) {
  console.error(e); 

  /* 
     Chromium:

     DOMException: Failed to execute 'querySelector' on 'Document':
     '#111' is not a valid selector.

     Firefox
     SyntaxError: '#111' is not a valid selector

  */
}

try {
  console.log(document.querySelectorAll("#111"));
} catch(e) {
  console.error(e); 

  /* 
     Chromium:

     DOMException: Failed to execute 'querySelector' on 'Document':
     '#111' is not a valid selector.

     Firefox
     SyntaxError: '#111' is not a valid selector

  */
}

然而，document.getElementById() returns 元素

const  div = document.createElement("div");

div.id = 111;

document.body.appendChild(div);

try {
  console.log(document.getElementById("111"));
} catch(e) {
  console.error(e); 
}

参考文献：

6.2 SGML basic types

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

7.5.2 Element identifiers: the id and class attributes

Attribute definitions

id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

DOM - Living Standard

While this specification defines requirements for class, id, and slot attributes on any element, it makes no claims as to whether using them is conforming or not.

HTML - Living Standard

The id attribute specifies its element's unique identifier (ID).

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

Document.querySelector()

Throws a SYNTAX_ERR exception if the specified group of selectors is invalid.

Document.querySelectorAll()

Throws a SYNTAX_ERR exception if the specified group of selectors is invalid.

---

"111" 是有效的 HTML id 属性还是 document.querySelector() 和 document.querySelectorAll() 正确抛出语法错误？

Answer 1

根据 MDN 关于 HTML id 属性：

This attribute's value must not contain whitespace (spaces, tabs etc.).

这似乎是唯一的限制。他们注意到 HTML4 更严格，但仅此而已。

根据 spec:

The value must not contain any ASCII whitespace.

这意味着 111 是 HTML id 属性的有效值。

querySelector 和 querySelectorAll 但是使用 CSS 选择器，它们更严格：

一个ID selector consists of a #, followed by a valid identifier.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B WF".

这意味着 #111 不是有效的 CSS 选择器。相反，使用：

document.querySelector('[id="111"]')

直接回答你的问题：

Is "111" a valid HTML id attribute or are document.querySelector() and document.querySelectorAll() correctly throwing syntax errors?

"111" 是有效属性， 和 语法错误被正确抛出。

Answer 2

只是 运行 解决了我不能使用 GUID 作为 ID 的问题。如果 GUID 以字母开头，则它有效。如果 GUID 以数字开头，它将不起作用。也许一份文件说 GUID 可以以数字开头，但并非在所有情况下都如此......

-> 2020 年的答案是：ID 应以字母开头，以便它们在任何地方都能可靠地工作 - 无论 CSS、JavaScript - 无论哪种浏览器。

现在我只需在我的 GUID 前面放一个 G-。