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

Question

Given

 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 */ }

however, document.getElementById() returns the element

 const div = document.createElement("div"); div.id = 111; document.body.appendChild(div); try { console.log(document.getElementById("111")); } catch(e) { console.error(e); }

References:

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.

---

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

Answer 1

According to MDN about the HTML id attribute:

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

That seems to be the only restriction. They have a note that HTML4 was more strict, but that's it.

According to the spec :

The value must not contain any ASCII whitespace.

That means that 111 is a valid value for the HTML id attribute.

querySelector and querySelectorAll however use CSS selectors, which are more strict:

An 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\\26 W\\3F".

That means that #111 is not a valid CSS selector. Instead, use:

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

To answer your question directly:

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

"111" is a valid attribute, and the syntax error are thrown correctly.

Answer 2

Just ran into the problem that I cannot use GUIDs as ID. If the GUID starts with a letter, it works. If the GUID starts with a digit, it will not work. Maybe one documentation says that a GUID can start with a digit, but not in all case ...

-> The answer in 2020 is: IDs should start with a letter, so that they work reliably everywhere - no matter if CSS, JavaScript - no matter which browser.

Now I simply put a G- in front of my GUIDs.