Syntax error when using ID beginning with integer

[jonathantneal]

Syntax error when using ID beginning with integer

[mtetlow]

+1, just hit this as well in IE11 http://screencast.com/t/qapokrM6i

[mtetlow]

Well this is funny. Try doing document.querySelector('#1') in the IE11 javascript console, you get the same syntax error.

Could it be IE puking due to HTML4 technicalities? http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html

[fvsch]

Was going to say "ids must begin with a letter, duh", but apparently that changed in HTML5. Looks like IE/Edge’s implementation of document.querySelector was not updated accordingly.

Can you test if document.getElementById has the same issue? If not, that could be a usable workaround for svg4everybody.

[mcmimik]

Yes, IE11 looks good with document.getElementById and an identifier starting with an integer.

[jonathantneal]

Thanks, @mcmimik, I will add a test for this and resolve it if it is not already.

[jonathantneal]

getElementById is not available on detached elements, so I need to figure out a workaround.

[fvsch]

Note that in XML, id attributes (and many other types of "names") cannot start with a number. Compare:
https://www.w3.org/TR/xml11/#NT-NameStartChar
https://www.w3.org/TR/xml11/#NT-NameChar

Authors should probably avoid ids that start with a number.

But if you want to make it work regardless, maybe look into the attribute selector? Tested this in IE11:

document.querySelector('#1000') // SyntaxError
document.querySelector('[id="1000"]') // [object HTMLDivElement]

[shawnbot]

Yeah, the id attribute selector is more resilient because it also prevents perfectly valid ids (in HTML5) like foo.bar from being interpreted as #foo.bar.

[shawnbot]

Anyone want to take a look at this commit? I'm pretty sure that the try/catch is necessary for cases in which IE (and older modern browsers) treat some perfectly valid HTML5 IDs as invalid in both Document and DocumentFragment.

FWIW, I used x-browser to test support for DocumentFragment.prototype.getElementById, and found that IE (all versions), Edge, and Safari all lacked it, but the latest Chrome and Firefox support it. (WebKit apparently has a fix in, but I can't tell if/when that will ship.)

[shawnbot]

Addendum: I was testing the wrong version of Safari via Sauce Labs; in OS X 10.11, Safari includes the WebKit fix for DocumentFragement.prototype.getElementById.