YUI get element by id method not working for numeric starting ids

Question

I've just switched from YUI2 to YUI3. So, instead of using YAHOO.util.Dom.get(ID_OF_ELEMENT), I tried to use Y.one('#ID_OF_ELEMENT)'. It works fine for a div with id img123, but not with 123img or 123.

I tried also using Y.all but it didn't work. The only way I found to make it work, while still using YUI, was using Y.DOM.byId (shown as an alternative in YUI forum).

So what I did was to grab the element with the last and get the Node with first, like this:

Y.one(Y.DOM.byId(ID_OF_ELEMENT)).append(SOME_HTML_CONTENT);

I could not alone using only Y.DOM.byId because I needed to manipulate it's content as a Node.

So, is there a way to do that using only Y.one? Is that a YUI bug?

I have made a comment on that YUI forum entry, since I don't know if that's really a bug I could fill in YUI bug reporting tool.

Answer 1

If you use html4:

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 (".").

Also see this link.

=== UPDATE ===

For html5:

In your example using Y.one(...) yui calls the browsers native query selector: querySelector(selector) (see here).
But not all browsers querySelector function accept all allowed html5 ids. E.g. the firfox10 native query selector fails for ids with starting digit (try this example in different browsers).
Why? Mozilla uses CSS2.1 specification for selectors:
Mozilla links in his querySelector documentation to the Selectors API Level 1.
In the first chapter "Abstract":

Selectors, which are widely used in CSS, are patterns that match against elements in a tree structure [SELECT][CSS21].

The [SELECT] links to the Selectors Level 3 and there in chapter 6.5 "ID selectors":

...
An ID selector contains a "number sign" (U+0023, #) immediately followed by the ID value, which must be an CSS identifiers.
...

From the linked css2.1 identifiers specification:

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".

=== UPDATE ===

You can use following selector [id="123"]. E.g.:

YUI().use('node', function (Y) {
    Y.one('[id="123"]').on("click", function (e) {
        alert("Hello World!");
    });
});

Also see this example.